时间戳

首页 > 解决方案 > react redux中如何将store传递给子组件？

reactjs - react redux中如何将store传递给子组件？

问题描述

我正在开发一个反应应用程序，我创建了一个全球商店

const store = HsGlobalStore();

class HsManApp extends React.Component {
    render() {
        return (
            <div className="d-flex flex-column bag-white">
                <Provider store={store}> <NewHsMasterNav />  </Provider>
                <div className="clearfix"></div>
                <div className="container-fluid hs-fix-nav-content ">
                    <Router>
                        <Provider store={store}> 
                            <Route path="/" exact component={HsHome} />
                            <Route path="/:pageName" component={HsPage} />
                        </Provider>
                    </Router>
                </div>
            </div>
           
        );
    }
}


const id = "hs_welcome_root";

ReactDOM.render(<HsManApp />, document.getElementById(id));

export default HsManApp;

我通过 Provider 将此商店传递给母版页组件

<Provider store={store}> 
                            <Route path="/" exact component={HsHome} />
                            <Route path="/:id" component={HsPage} />
                        </Provider>

但是这个Man组件也有sob组件

class HsHome extends React.Component {

    constructor(props) {
        super(props);

    }



    render() {
        return (
                <div className="row">
                    <NewHsAvatarBox /> 
                </div>
        );
    }
}

export default HsHome;

现在。我怎样才能将这家商店传递给这个零件？

标签： reactjsreduxreact-redux

解决方案

您需要“装饰”您的组件，将商店传递给道具

import { connect } from 'react-redux';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        console.log(this.props.name);
    }
    ...
}

const mapStateToProps = (store) => {
   // console.log('store', store);
   return {
      name: store.<reducer>.name,
   };
};

export default connect(mapStateToProps, null)(MyComponent);

然后使用 mapStateToProps 中导出的名称作为 MyComponent 中的道具

推荐阅读