根组件为 React.component
Root component as React.component
我正在使用 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。如您所见,最初 props 是通过 props 参数传递给 App 的。我已经将 App/index.js
class 更改为:
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;
这会抛出一个错误,即 props 没有被定义:
ReferenceError: props is not defined
App.render
**/App/index.js
可以看到根路由是如何实例化的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),
};
如有任何帮助,我们将不胜感激。
使用:
this.props.children
你也不需要将子项更改为数组
只需使用:
{this.props.children}
我正在使用 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。如您所见,最初 props 是通过 props 参数传递给 App 的。我已经将 App/index.js
class 更改为:
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;
这会抛出一个错误,即 props 没有被定义:
ReferenceError: props is not defined App.render **/App/index.js
可以看到根路由是如何实例化的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),
};
如有任何帮助,我们将不胜感激。
使用:
this.props.children
你也不需要将子项更改为数组
只需使用:
{this.props.children}