在声明的内联中导入时使用相同的JSX组件时出错

I've got a simple redux boilerplate project and I'm experiencing different behaviour when I import a top level (smart) component compared to if I inline the class declaration.

我有一个简单的redux样板项目,当我导入*(智能)组件时,我遇到了不同的行为,而不是我内联类声明。

Creating the class causes no errors however when I extract the class to a separate file I receive the following error:

创建类不会导致错误,但是当我将类提取到单独的文件时,我收到以下错误:

Warning: Failed propType: Required prop `routerState` was not specified in `AppContainer`. Check the render method of `RoutingContext`.

I have tried inlining the entire file and the error goes away

我试过内联整个文件,错误就消失了

// == Import ==================================================================
import AppContainer from '../containers/App.jsx';
// === Declare Inline =========================================================
import { connect } from 'react-redux';
import { Component, PropTypes } from 'react';


@connect(state => ({ routerState: state.router }))
class AppContainer extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    routerState: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-xs-12">
            <h1>App</h1>
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}
// ============================================================================

Here is the project repo (its super striped back).

这是项目回购(它的超级条纹背面)。

  "dependencies": {
    "history": "^1.12.5",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-redux": "^4.0.0",
    "react-router": "^1.0.0-rc3",
    "redux": "^3.0.2",
    "redux-router": "^1.0.0-beta3"
  },

1 个解决方案

#1

So from what I understand it's because you have said that the propTypes children and routerState are to be expected, yet you haven't used them as propTypes when using the component, as you are passing the App component as a propType into the <Route /> component.

所以根据我的理解,因为你已经说过propTypes children和routerState是预期的,但你在使用组件时没有将它们用作propTypes,因为你将App组件作为propType传递给组件。

<Route path="/" component={AppContainer}>
  <IndexRoute component={Home} />
</Route>

I am not sure if your App component should have these propTypes, as you can't pass them in. However you should be able to retrieve this.props.children by changing that propType to PropTypes.node.

我不确定您的App组件是否应该具有这些propTypes,因为您无法传递它们。但是您应该能够通过将propType更改为PropTypes.node来检索this.props.children。

You can pass props into your router components by doing:

您可以通过以下方式将道具传递到路由器组件:

<Route path="myComponent/:name" component={MyComponent} />

Where 'name' is the param you want, and do: this.props.params.name within 'MyComponent'

'name'是你想要的参数,并且:'MyComponent'中的this.props.params.name

#1