对各种组件使用 Redux 的 connect

Question

我有三个相互嵌入的组件，它们都以相同的动作连接到减速器。似乎我只找到了在某些容器文件中只有一个组件通过连接函数传递的示例。

我该怎么做？

这是我当前的代码，但不确定是否需要：

    //need HelpMenu2 and HelpMenu3 to be passed through as well.
    export default connect( mapStateToProps, matchDispatchToProps)(HelpMenu1);

Edit: As requested, here is the code:

class HelpMenu extends Component{
    render(){
        var me=this;
        var api ="https://api.someapi.com/";
        return(
            <ul>
                <div >Click here to test</div><br/>
                {this.state.allTopics.map(function (helpTopics, key) {
                    return (
                        <ul key={key}>
                            <li>

                                <div onClick={()=>me.props.fetchHelpTopics(api)}>
                                    {helpTopics.id}
                                    </div>
                                <ul>
                                    {helpTopics.isExpanded ? <SubMenu2 helpTopics={helpTopics}  isLastExpanded={false}/> : null}
                                </ul>
                            </li>
                        </ul>
                    );
                })}
            </ul>
        );
    }
}

class SubMenu extends Component{

    render(){
        var me =this;
        var api ="https://api.someapi.com/";
        return (
            <div>
                {this.props.helpTopics.subtopics.map(function (helpSubtopics, key) {
                    return (
                        <ul key={key}>
                            <li>
                                <div onClick={()=>me.props.fetchHelpTopics(api)}>
                                    {helpSubtopics.id}</div>
                                {helpSubtopics.isExpanded ? <LastSubMenu helpSubtopics={ helpSubtopics}/> : null}
                            </li>

                        </ul>
                    );
                })}
            </div>
        );
    }
}


class LastSubMenu extends Component{

    render(){
        var me=this;
        var api ="https://api.someapi.com/";
        return(
            <div>
                {this.props.helpSubtopics.subtopics
                    .map(function (helpSubSubtopics, key) {
                        return (
                            <ul key={key}>
                                <li>
                                    <div
                                        onClick={me.onTopicClick.bind(me, helpSubSubtopics)}>
                                            <div onClick={()=>me.props.fetchHelpTopics(api)}>
                                        {helpSubSubtopics.title}
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        );
                    })}
            </div>

        );
    }
}

标签上有 onClick 时会发生事件。

编辑：我的连接代码：

export default connect( mapStateToProps, matchDispatchToProps)(HelpMenu);

我该如何多次调用它？据我了解，每个文件只能使用 export default 一次，所以我这样做了：

export default connect( mapStateToProps, matchDispatchToProps)(HelpMenu);
connect( mapStateToProps, matchDispatchToProps)(SubMenu2);
connect( mapStateToProps, matchDispatchToProps)(LastSubMenu);

这行不通。

Answer 1

再次调用连接其他组件。

您需要分别导出每个方法调用的返回值。在 ES6 中看起来像这样。（您可能需要搜索适用于您的 js 设置的语法） export const first = connect( mapStateToProps, matchDispatchToProps)(HelpMenu); export const second = connect( mapStateToProps, matchDispatchToProps)(SubMenu2); export const third = connect( mapStateToProps, matchDispatchToProps)(LastSubMenu);

然后在显示它们的组件中单独访问它们。

对各种组件使用 Redux 的 connect

Using Redux's connect for various components

javascript

reactjs

redux

react-redux