javascript - 使用 Redux 的 connect 来连接各种组件

Question

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

我该怎么做？

这是我当前的代码，但不确定是否有必要:

    //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

再次与其他组件调用 connect。

您需要分别导出每个方法调用的返回值。 在 ES6 中可能看起来像这样。 (您可能需要搜索哪些语法适用于您的 js 设置) 导出 const 首先 = connect( mapStateToProps, matchDispatchToProps)(HelpMenu); 导出常量第二=连接(mapStateToProps，matchDispatchToProps)(SubMenu2); 导出常量第三=连接(mapStateToProps，matchDispatchToProps)(LastSubMenu);

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