根组件作为 React.component

Question

我正在使用react-boilerplate，并且我正在尝试将App component 更改为扩展React.Component，因为我正在尝试通过遵循this example 来实现身份验证并根据身份验证状态显示/显示侧边菜单.可以看到，原本 props 是通过 props 参数传递给 App 的。我已将 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;

这会抛出 props 未定义的错误：

ReferenceError: props 未定义 应用程序渲染 **/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),
};

任何帮助将不胜感激。

Answer 1

使用：

this.props.children

您也不需要将孩子更改为数组

只需使用：

 {this.props.children}