ReactJS - {} this.props.children未定义

我看过很多帖子相关这种说法，但我无法理解为什么{this.props.children}在我的应用程序是不确定的（我是真正的新ReactJS）ReactJS - {} this.props.children未定义

与App.js开始这是我的主要成分，我有这样的：

import React, {Component} from 'react'; 
import Dashboard from './layouts/Dashboard'; 

class App extends Component { 
    render() { 
     return(
      <div id="container"> 
       <Dashboard /> 
      </div> 
     ); 
    } 
}

所以，Dashboard.js必须代码来渲染一个顶部栏和左侧栏中，“动态”的内容会在中心（这是我已经放置的地方{this.props.children}）

Dashboard.js 

render() { 
    return(
     <div className="content" id="wrapper"> 
      <!-- Navbar and sidebar code --> 
      <-- this is the dynamic content --> 
      <div id="page-wrapper" className="page-wrapper" ref="pageWrapper"> 
       {this.props.children} 
      </div> 
     </div> 
    ); 
}

路由器现在的问题是非常简单的：

<Route component={App}> 
    <Route path='/' component={Home} /> 
</Route>

我省略了有关Home.js的代码，但是这是一个简单的div在statyc方式打印"Hello World"

仪表板组件呈现，但没有“Hello World”放在我拥有的部分{this.props.children}

来源

2016-03-02 Mistre83

你要通过孩子仪表板：

class App extends Component { 
    render() { 
     return(
      <div id="container"> 
       <Dashboard>{this.props.children}</Dashboard> 
      </div> 
     ); 
    } 
}

来源

2016-03-02 09:45:04

您无法通过this.props.children访问组件的子项。 this.props.children指定由业主被传递到你的孩子：

var App = React.createClass({ 
    componentDidMount: function() { 
    // This doesn't refer to the `span`s! It refers to the children between 
    // last line's `<App></App>`, which are undefined. 
    console.log(this.props.children); 
    }, 

    render: function() { 
    return <div><span/><span/></div>; 
    } 
}); 

ReactDOM.render(<App></App>, mountNode);

要访问自己的子（跨度），地方裁判对他们https://facebook.github.io/react/docs/more-about-refs.html

来源

2016-03-02 09:43:01 Kordi

Dashboard有没有孩子。

在App.js中更改<Dashboard />到<Dashboard>{this.props.children}</Dashboard>，以便您的控制板组件可以访问您的组件pass through the Route。

来源

2016-03-02 09:52:48 tcollart

ReactJS - {} this.props.children未定义

回答

相关问题