我有一个更高阶的组件,它使用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

09-10 11:04
查看更多