傳遞道具克隆子元素給未知道具警告

Question

我有一個AdminLayout的反應是又加載子元素以這種方式：

class AdminLayout extends Component { 

    constructor(props){ 
    super(props) 
    this.state = { 
     flash: { msg: "some message", type: undefined} 
    } 
    } 

    updateFlash(flash){ 
    this.state.flash = flash 
    } 

    render() { 
    return(
     <div> 
     <FlashMessage flash={this.state.flash} /> 
     <NavBar/> 
     { React.cloneElement(this.props.children, {updateFlash: this.updateFlash})} 
     </div> 
    ) 
    } 
} 

這裏的想法是，我打算讓我的子元素更新AdminLayout中的Flash狀態。然而，隨着代碼{updateFlash: this.updateFlash}我收到以下錯誤：

Warning: Unknown prop `updateFlash` on <div> tag. Remove this prop from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html 
    in div (created by Grid) 
    in Grid (created by LocationEdit) 

我看過的文件，我不認爲我做的任何案件。我也沒有試圖直接在任何div上設置道具。

有沒有人見過這樣的事情？

Hrm ...它也可能有助於知道我的內部組件是什麼樣子。我試着濾出來任何非必要...：

import React, {Component} from 'react' 
import AdminLayout from '../components/layouts/AdminLayout' 
import LocationsSource from '../sources/LocationsSource' 
import {Button, Grid, Row, Col, FormGroup, FormControl, ControlLabel, HelpBlock} from 'react-bootstrap' 
import { browserHistory } from 'react-router' 

class LocationEdit extends Component { 

    constructor(props) { 
    super(props) 
    this.handleSubmit = this.handleSubmit.bind(this) 

    this.state = { 
     loading: true, 
     location: { 
     name: "", 
     site_link: "", 
     description: "" 
     } 
    } 
    } 

    handleSubmit = (event) => { 
    event.preventDefault() 

    let data = this.state.location 

    if(data._id != undefined) { 
     LocationsSource.update(data).then((response) => { 
     browserHistory.push('/admin/locations/'); 
     }) 
    } else { 
     LocationsSource.create(data).then((response) => { 
     browserHistory.push('/admin/locations/'); 
     }) 
    } 
    } 

    componentDidMount() { 
    if(this.props.params.id) 
     LocationsSource.find(this.props.params.id).then((result) => { 
     this.setState({loading: false, location: result}) 
     }) 
    else{ 
     this.setState({loading: false, location: {}}) 
    } 
    } 

    handleChange = (event) => { 
    let change = {location: this.state.location} 
    change['location'][event.target.name] = event.target.value 
    this.setState(change) 
    } 

    componentWillUnmount() {} 

    render() { 
    let location = this.state.location 

    if(this.state.loading) 
     return(
     <AdminLayout> 
      <Row> 
      <img src="/assets/images/loading.gif" /> 
      </Row> 
     </AdminLayout> 
    ) 
    else 
     return(
     <AdminLayout> 
      <Grid> 
      <Row> 
       <Col xs={8} md={8}> 
       <h2>Location</h2> 
       </Col> 
      </Row> 
      <Row> 
       <Col xs={8} md={8}> 
       <form onSubmit={this.handleSubmit}> 
        <FormGroup controlId={"name"}> 
        <ControlLabel>Name:</ControlLabel> 
        <FormControl onChange={this.handleChange} name="name" type="text" defaultValue={location.name} /> 
        </FormGroup> 
        <Button type="submit"> 
        Submit 
        </Button> 
       </form> 
       </Col> 
      </Row> 
      </Grid> 
     </AdminLayout> 
    ) 

    } 
} 

export default LocationEdit 

Answer 1

確定，問題的根源結束了，我用的反應路由器不正確。直到我添加了問題的最後一部分，這表明我正在從子組件LocationEdit中渲染AdminLayout，這是不可能的。

我這樣做是因爲使用react-router時，我直接加載該頁面，但我沒有意識到我實際上需要首先加載佈局，並且需要將子頁面定義爲子標籤。接下來是原來的路線我和改變我做：

render((
    <Router history={browserHistory}> 
    <Route path="/admin/" component={Locations} /> 
    <Route path="locations" component={LocationEdit} /> 
    </Router> 
), document.getElementById('app')); 

變化：

render((
    <Router history={browserHistory}> 
    <Route path="/admin/" component={AdminLayout} > 
     <Route path="locations" component={LocationEdit} /> 
    </Route> 
    </Router> 
), document.getElementById('app')); 

然後我把AdminLayout標籤了我LocationEdit頁面。我有一種感覺，它試圖將props直接加載到<Grid>標籤上，而不是按照我的想法加載到實際組件上。

Answer 2

updateFlash(flash){ 
    this.setState({ flash }); 
    } 

    render() { 
    return(
     <div> 
     <FlashMessage flash={this.state.flash} /> 
     <NavBar/> 
     { React.cloneElement(this.props.children, {updateFlash: this.updateFlash.bind(this)})} 
     </div> 
    ) 
    }