Question

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

我试过了：

route: React.PropTypes.object - 我的eslint抱怨：道具类型 object被禁止使用react / forbid-prop-types
route: React.PropTypes.instanceOf(React.propTypes) - 这导致了一个运行时警告：'instanceof'的右侧不可调用检查bla的渲染方法

我们有策略来验证由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文档，了解有关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道具是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

Answer 4

试试看

PropTypes.objectOf(PropTypes.object()).isRequired

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

4 个答案: