在组件中处理通过 react-router 传递的参数
Handling parameters passed through react-router in component
因此,在 react-router v4 中,我的路线如下所示:
<Route path="/suppliers/:id?" component={Suppliers} />
我正在将一个可选的 'id' 参数传递给我的 Suppliers 组件。这没问题。
为了后代,这是我的Link:<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 属性 更改会中断,则此解决方案似乎不可持续。或者我做得对吗?
提前致谢。
您的代码没问题,但您也可以将 proptypes 定义为对象。
match: PropTypes.object.isRequired
如果有一天你需要其他道具,比如match, location, history
。你可以这样定义它。
Suppliers.propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
为了涵盖这些关于匹配(和历史)的案例以取悦 linters,您可以像这样声明您的 prop-types:
Suppliers.propTypes = {
match: PropTypes.shape().isRequired,
}).isRequired,
};
这是在我们的项目中最适合我们的解决方案。
因此,在 react-router v4 中,我的路线如下所示:
<Route path="/suppliers/:id?" component={Suppliers} />
我正在将一个可选的 'id' 参数传递给我的 Suppliers 组件。这没问题。
为了后代,这是我的Link:<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 属性 更改会中断,则此解决方案似乎不可持续。或者我做得对吗?
提前致谢。
您的代码没问题,但您也可以将 proptypes 定义为对象。
match: PropTypes.object.isRequired
如果有一天你需要其他道具,比如match, location, history
。你可以这样定义它。
Suppliers.propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
为了涵盖这些关于匹配(和历史)的案例以取悦 linters,您可以像这样声明您的 prop-types:
Suppliers.propTypes = {
match: PropTypes.shape().isRequired,
}).isRequired,
};
这是在我们的项目中最适合我们的解决方案。