Блог

У меня есть три компонента, которые встроены друг в друга, и все они должны быть подключены к редукторам с одинаковыми действиями. Кажется, я нашел только примеры, когда в определенном контейнере файлы, в которых только один из компонентов передается через функцию connect.

Как я могу это сделать?

Вот мой текущий код, хотя не уверен, что это необходимо:

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

Который не работает.

Вызовите connect еще раз для других компонентов.

Вам нужно экспортировать возвращаемое значение из каждого вызова метода отдельно. в ES6 это может выглядеть примерно так. (возможно, вам потребуется поискать, какой синтаксис работает с вашей настройкой js)
export const first = connect( mapStateToProps, matchDispatchToProps)(HelpMenu);
export const second = connect( mapStateToProps, matchDispatchToProps)(SubMenu2);
export const third = connect( mapStateToProps, matchDispatchToProps)(LastSubMenu);


Затем получите к ним доступ отдельно в компоненте, который их отображает.