处理通过组件

Question

所以，在react-router v4中，我的Route看起来像这样：

      <Route path="/suppliers/:id?" component={Suppliers} />

我通过了一个可选的＆＃39; id＆＃39;我的供应商组件的参数。这没问题。

对于后代，这是我的链接：<Link to="/suppliers/123">Place Order</Link>

然后，在我的组件中，我引用参数：         <p>{this.props.match.params.id}</p>

这样可行，但是我的linter给了我以下错误：[eslint] 'match' is missing in props validation (react/prop-types)

出于这个原因，我已经将propTypes定义为：

Suppliers.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.number,
    }).isRequired,
  }).isRequired,
};

但感觉我写的样板代码比我可能需要的更多。我的问题是，有没有更好的方法来定义我的组件中的propTypes，以避免linter错误？此外，这个解决方案似乎是不可持续的，例如，如果props.match属性发生变化，它将会中断。或者我这样做了吗？

提前致谢。

Answer 1

您的代码没问题，但您也可以将proptypes定义为对象。

UnderOverTemplate

如果有一天你需要其他道具，例如match: PropTypes.object.isRequired 。你可以用这种方式定义它。

match, location, history

Answer 2

为了涵盖与比赛（和历史）有关的这些情况，以取悦短毛猫，您可以这样声明自己的道具类型：

     Suppliers.propTypes = {
      match: PropTypes.shape().isRequired,
      }).isRequired,
    };

这是最适合我们项目的解决方案。