路由对象验证作为 React 中的道具答案

【问题标题】：Route object validation as props in React路由对象验证作为 React 中的道具
【发布时间】：2016-07-07 04:13:27
【问题描述】：

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

我试过了：

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

我们有验证由 eslint 规则强制执行的 props 的策略，我如何验证路由对象？

我的代码：

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>
        );
    }
}

【问题讨论】：

路由道具是什么意思？不就是一个简单的组件属性吗？你的路由属性是什么类型的？
路由是 react-router 库中的对象

标签： reactjs react-router

【解决方案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

【讨论】：

使用形状而不是正确的路由器验证器比正确的解决方案更有效，尽管它对我有用。也许更新您的答案以建议使用React.PropTypes.shape() 而不是Proptype.shape
@MikhailChibel 这是一个错字。

【解决方案2】：

你也可以使用。

PropTypes.objectOf(PropTypes.any).isRequired

【讨论】：

【解决方案3】：

您要确保组件中的 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 语法混用来创建新组件。

【讨论】：

谢谢！我试图发送一个返回视图作为道具的函数，并将实例更改为对象。 viewInput: PropTypes.instanceOf(Object).isRequired,

【解决方案4】：

试试看

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

【讨论】：