Question

我实现了一个需要访问被包装组件的道具的HOC。这将与react-redux在ownProps和mapStateToProps中实现mapDispatchToProps的方式类似。

注意：我正在寻找一种方法将道具传递到自定义HOC， NOT 如何使用react-redux。我只提到react-redux来说明我的用例

我想做这样的事情:(注意这个例子不起作用）

＆＃13;

const HOC = InnerComponent => {
  console.log(InnerComponent.props.SomeProp)
  return InnerComponent
}

＆＃13;

Answer 1

传递给InnerComponent的道具首先以this.props的形式通过HOC。因此，如果您的HOC是一个类组件，您也应该可以访问传递给InnerComponent的道具。

const HOC = InnerComponent => {
    return class extends React.Component {
        render() {
            // You should see all props passed to InnerComponent here
            console.log(this.props);
            return <InnerComponent {...this.props} /> 
        }
    }
};

Answer 2

我不认为蔡斯回答了OP的实际要求，即使它被标记为已接受的答案。

用于返回HOC的redux connect函数is a higher-order function。 connect以mapStateToProps函数作为参数。 mapStateToProps还采用被包装的Component的ownProps作为参数。我认为OP要求的是如何做到这一点。

这是我建立withSomething函数的方式，该函数在使用ownProps方面类似于connect函数。

// withSomething function takes a function
export const withSomething = mapOwnPropsToSomethingProps =>
    // ...and returns a higher-order component
    WrappedComponent => {
        // ...that returns another component...
        return function ComponentWithSomething(props) {
            // ... that renders the wrapped component with Something
            // that receives the mapped somethingProps
            const somethingProps = mapOwnPropsToSomethingProps(ownProps);
            return (
                <Something {...somethingProps}>
                    <WrappedComponent {...props} />
                </Something>
            );
        };
    };

以下是使用withSomething函数的方法：

const enhancedComponent = withSomething(ownProps => ({
    myId: ownProps.id,
}))(MyComponent);

在自定义React HOC中获取ownProps

2 个答案: