Передача реквизитов в подключенный компонент React Redux, завернутый в HOC

Question

Я использую HOC, чтобы обернуть все мои компоненты с провайдером Redux. Но когда я использую компоненты по отдельности, мне иногда нужно передать им реквизиты, а использование ownProps дает мне реквизиты из оболочки HOC.

Как я могу передать реквизиты напрямую подключенному компоненту?

По сути, я использую React для существующего сайта, поэтому мне нужно визуализировать мои компоненты в DOM, используя элементы HTML в качестве контейнеров. Я хочу, чтобы все контейнеры были подключены к хранилищу, но я также хочу передать данные непосредственно в элементы 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;
}