[英]ReactJS - {this.props.children} is undefined
I have seen many post related this argument but i'm not able to understand why {this.props.children}
is undefined in my application (i'm really new to ReactJS)我看过很多与这个论点相关的帖子,但我无法理解为什么
{this.props.children}
在我的应用程序中未定义(我真的是 ReactJS 的新手)
Starting with App.js
that is my main component i have this:从
App.js
开始,这是我的主要组件,我有这个:
import React, {Component} from 'react';
import Dashboard from './layouts/Dashboard';
class App extends Component {
render() {
return(
<div id="container">
<Dashboard />
</div>
);
}
}
So, Dashboard.js
have to code to render a top bar and a left-side bar, the "dynamic" content will go on the center (and this is where i have placed {this.props.children}
)因此,
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>
);
}
The router right now is very simple:现在的路由器非常简单:
<Route component={App}>
<Route path='/' component={Home} />
</Route>
I have omitted the code related to Home.js, but this is a simple div
that print in statyc way "Hello World"
我省略了与 Home.js 相关的代码,但这是一个简单的
div
,以 statyc 方式打印"Hello World"
Dashboard component is renderd but no "Hello World" is placed in the part where i have {this.props.children}仪表板组件已呈现,但在我拥有 {this.props.children} 的部分中没有放置“Hello World”
You can't access the children of your component through this.props.children.您无法通过 this.props.children 访问组件的子组件。 this.props.children designates the children being passed onto you by the owner:
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);
To access your own subcomponents (the spans), place refs on them https://facebook.github.io/react/docs/more-about-refs.html要访问您自己的子组件(跨度),请在其上放置 refs https://facebook.github.io/react/docs/more-about-refs.html
You have to pass children to Dashboard:您必须将孩子传递给仪表板:
class App extends Component {
render() {
return(
<div id="container">
<Dashboard>{this.props.children}</Dashboard>
</div>
);
}
}
Dashboard
has no children. Dashboard
没有子项。
Change <Dashboard />
to <Dashboard>{this.props.children}</Dashboard>
in App.js so your Dashboard component can have access to the component you pass through the Route
.在 App.js 中将
<Dashboard />
更改为<Dashboard>{this.props.children}</Dashboard>
以便您的 Dashboard 组件可以访问您通过Route
传递的组件。
You can check if children exists in your Dashboard.js您可以检查 Dashboard.js 中是否存在子项
render() {
return <div>{this.props.children !== undefined && this.props.children}</div>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.