ESLint React-Router v4 - 如何验证匹配参数道具？

Question

我正在使用 React-Router v4 的 Match object 将参数传递给下一个组件。我的路由是这样的：

<Switch>
  <Route exact path="/" component={ExperimentListPage} />
  <Route path="/experiment/:experiment" component={ExperimentResultsPage} />
</Switch>

我的子组件看起来像：

const ExperimentResultsPage = props => (
   <ExperimentResultsContainer experimentName={props.match.params.experiment} />
);

export default withRouter(ExperimentResultsPage);

一切都按预期工作，但是 ESLint 对我使用 match.params.experiment 感到非常不满意，并且 [eslint] 'match.params.experiment' is missing in props validation (react/prop-types)

出错

我在 React 文档中看到我可以使用 PropTypes.shape 但是我的 params 对象，但我希望有更好的方法，特别是因为 Match 对象包含很多字段。

是否有更好的方法将 Match 路由对象添加到 props 验证中？那会是什么样子？如果没有，我是不是错过了一些可以帮助解决这个问题的其他方法？

Answer 1

我运行进入类似的东西，eslint 似乎很好，只声明我使用什么作为道具并忽略匹配中未使用的字段：

  match: PropTypes.shape({
    params: PropTypes.shape({
      experiment: PropTypes.string,
    }),
  }).isRequired,

Answer 2

如果组件需要一个具有不同形状的不同键的对象，最好的方法是在 objectOf 中使用 PropTypes.any，如下所示：

 match: PropTypes.objectOf(PropTypes.any),

ESLint React-Router v4 - 如何验证匹配参数道具？

ESLint React-Router v4 - How to validate Match params props?

reactjs

eslint

react-router-v4