我有一个更高阶的组件,它使用React Router提供的location.search
道具构造一个queryParams
对象,并将其作为道具传递给它的包装组件。
function withQueryParams(WrappedComponent) {
return (props) => {
const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
const newProps = {
...props,
queryParams: queryParams
}
return <WrappedComponent {...newProps} />
}
}
export default withQueryParams
我会这样使用它:
class MyComponent extends React.Component { ... }
export default withQueryParams(MyComponent)
当然,我会将
MyComponent
包装在一条路线中:<Route path="/mycomponent" component={MyComponent} />
但是回到我的
withQueryParams
HOC,我想确保props.location
始终可用,这意味着我希望它总是具有React Router的道具。输入withRouter
,它本身就是React Router提供的HOC,您可以使用它来使这些道具可用。在我的
withRouter
HOC中使用withQueryParams
来确保props.location
可用的最佳方法是什么?谢谢。
最佳答案
function withQueryParams(WrappedComponent) {
return withRouter((props) => {
const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
const newProps = {
...props,
queryParams: queryParams
}
return <WrappedComponent {...newProps} />
})
}
export default withQueryParams