[英]Root component as React.component
I'm using react-boilerplate and I'm trying to change the App component to extend React.Component
, since I'm trying to implement authentication and displaying/showing side menu depending on authentication state by following this example . 我正在使用react-boilerplate,并且尝试更改App组件以扩展
React.Component
,因为我试图通过遵循此示例来实现身份验证以及根据身份验证状态显示/显示侧菜单。 As you can see, originally props are passed to App via props parameter. 如您所见,原始道具通过props参数传递给App。 I've changed the
App/index.js
class to this: 我将
App/index.js
类更改为:
import React from 'react';
import Header from 'components/Header';
import SideMenu from 'containers/SideMenu';
import Footer from 'components/Footer';
import auth from 'utils/auth'
export class App extends React.Component {
render() {
console.log(props)
return (
<div>
<Header />
<SideMenu />
{React.Children.toArray(props.children)}
<Footer />
</div>
);
}
}
App.propTypes = {
children: React.PropTypes.node,
};
export default App;
This throws an error that props are not defined: 这会引发错误,即未定义道具:
ReferenceError: props is not defined App.render **/App/index.js
ReferenceError:道具未定义App.render ** / App / index.js
You can see how root route is instantiated here : 您可以在此处查看如何实例化根路由:
// Set up the router, wrapping all Routes in the App component
import App from 'containers/App';
import createRoutes from './routes';
const rootRoute = {
component: App,
childRoutes: createRoutes(store),
};
Any help would be appreciated. 任何帮助,将不胜感激。
use: 采用:
this.props.children
Also you dont need to change the children to array 另外,您不需要将子级更改为数组
simply use: 只需使用:
{this.props.children}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.