Question

我正在使用HOC使用Redux Provider包装所有组件。但是当单独使用组件时，有时我需要将道具传递给它们，而使用ownProps可以从HOC包装器中获得道具。

如何将道具直接传递给连接的组件？

我实质上是将React分散到现有站点，因此我需要使用HTML元素作为容器将组件呈现到DOM。我希望所有容器都连接到商店，但我也想直接将数据传递到页面上的HTML元素，并在组件中使用该数据。

// HOC component 'withStore.js'
export default function (WrappedComponent) {
    function ReduxStore() {
        return (
            <Provider store={ store }>
                <WrappedComponent testProp="Dont show me!" />
            </Provider>
        );
    }
    return ReduxStore;
}


// The connected component I want to pass props directly to
export class ListingThumbnails extends PureComponent {
    render() {
        const {
            ownProps,
        } = this.props;

        console.log(this.props.ownProps);
    }
}

const mapStateToProps = (state, ownProps) => ({
    state,
    ownProps,
});

export default withStore(connect(mapStateToProps)(ListingThumbnails));


// Rendering to the DOM
ReactDOM.render(
    <ListingThumbnailsComponent testProp="Show me!" />,
    document.querySelector('#listing-thumbnails-container'),
);

控制台日志显示了传递给WrappedComponent的道具

但是我希望它显示传递给ListingThumbnailsComponent的道具

Answer 1

我不确定是否会遇到问题，但是您的ReduxStore现在是组件。它是“包装组件”周围的组件。这意味着您必须将ReduxStore的道具传递给它的子节点，以便在更深的层次上控制台记录道具：

export default function (WrappedComponent) {
    function ReduxStore(props) {
        return (
            <Provider store={ store }>
                <WrappedComponent {...props} />
            </Provider>
        );
    }
    return ReduxStore;
}

将道具传递给包装在HOC中的React Redux连接的组件

1 个答案: