Question

我看到很多帖子都与此相关，但我无法理解为什么{this.props.children}在我的应用程序中未定义（我对ReactJS来说真的很新）

从作为我主要组成部分的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必须编码以呈现顶部栏和左侧栏，＆＃34;动态＆＃34;内容将放在中心（这是我放置{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"

仪表板组件已渲染，但没有＆＃34; Hello World＆＃34;放在我有{this.props.children}

的部分

Answer 1

您无法通过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

Answer 2

您必须将孩子传递给仪表板：

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

Answer 3

Dashboard没有孩子。

将App.js中的<Dashboard />更改为<Dashboard>{this.props.children}</Dashboard>，以便您的信息中心组件可以访问您pass through the Route的组件。

Answer 4

您可以检查Dashboard.js中是否存在子项

render() {
  return <div>{this.props.children !== undefined && this.props.children}</div>
}

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

4 个答案: