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未定義

回答

相關問題