将对象验证路由为React中的道具

Question

在React类中验证路由道具的正确方法是什么？

我试过了:

• route: React.PropTypes.object- 我的eslint抱怨:道具类型 object被禁止反应/禁止 - 道具类型
• route: React.PropTypes.instanceOf(React.propTypes)- 这会在运行时产生警告:'instanceof'的右侧不可调用检查bla的render方法

我们有策略来验证由eslint规则强制执行的道具,如何验证路由对象？

我的代码:

var bla = React.createClass({
    displayName: 'bla',
    propTypes: {
        route: React.PropTypes.object, 
    })

class RootRoute extends React.Component {
    render() {
        return (
                <Router history={hashHistory}>
                    <Route path="/" component={bla}/>
                </Router>
        );
    }
}

Answer 1

首先尝试使用PropTypes.shape.

阅读eslint文档以获取有关该规则的更多信息:https: //github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md

阅读react-router docs以获取有关route对象形状的信息:https://github.com/reactjs/react-router/blob/master/docs/API.md#proptypes

对于你的第二次尝试,在里面instanceOf(),你需要放一个类型或类.我不确定你从哪里得到这个React.propTypes.一个错字？PropTypes.instanceOf在这里阅读更多信息:https://facebook.github.io/react/docs/reusable-components.html

Answer 2

您希望确保route组件中的prop是一个instanceof ReactRouter.Route.

您可以使用该PropTypes.instanceOf功能来完成此任务.

var MyComponent = React.createClass({
  displayName: 'MyComponent',
  propTypes: {
    route: React.PropTypes.instanceOf(Route).isRequired
  }
});

和路由器组件一样.

var RootRoute = React.createClass({
  render() {
    return (
      <Router history={hashHistory}>
         <Route path="/" component={MyComponent}/>
      </Router>
    );
  }
})

顺便说一下,您应该尽量不要将class ... extends ...语法与createClass创建新组件的语法混合在一起.

Answer 3

你也可以使用。

PropTypes.objectOf(PropTypes.any).isRequired