Javascript React js-将值传递给子级，再传递给父级，再传递给另一个子级

我正在尝试从Child>parent>Child传递数据

孩子

我试着在下面使用

 <li key={i} onClick={this.props.toggleContent(c.country)}>
                                    <img src={c.flag}/> {c.country}
                                </li>

但是，我的组件在执行此操作时无法正常工作，并且始终显示2个子组件

---

是否有合适的方法将数据从json数组传递给父级？

因此，我处理此问题的最佳方法是将“导入父级”类组件放入子级，将其放置在子级JSX的最顶部，但默认情况下将其隐藏。模态是固定的，背景覆盖整个页面，z索引高于其他子组件，因此只有模态内容才是唯一可访问的内容。对于项目列表的每次单击，您都会有一个“打开”模式的状态和一个关闭按钮来关闭它。您将更新模式内容，并在每次单击时将其打开

对于第二个子项，您可以在相同的模式上显示它（找到了一种方法：）

render（）{
var toggleContent=this.props.toggleContent；
返回(

{this.state.data.map（（项，索引）=>(

{项目.大陆}

{item.regions.map（（c，i）=>(
**
toggleContent（c.country，c.flag，c.languages，c.region）}>**
{c.country}

))}


))}

);
}

下线

---

onClick={（）=>切换内容（c.country、c.flag、c.languages、c.region）

所以我只想澄清一下。似乎您希望用户每次单击列表中的某个项目时都会弹出一个模式窗口，该模式包含有关国家的详细信息。单击国家后，模式将与国家列表一起弹出，当他们单击国家时，他们将看到语言列表。这是一个国家切换程序，用户将看到t主导航中的当前国家，当他们单击它时，他们将获得一个包含所有国家的模型弹出窗口，当他们从列表中选择一个国家时，他们将获得语言列表。（将国家组件更改为语言组件）所有切换工作正常。唯一的问题是将数据子级传递给父级，再传递给第二个子级。

<div className="modal-header">
                <h2>Choose your {title}</h2>
                <a href="#" className="model-close" data-dismiss="modal" aria-label="Close"><i
                    className="fa fa-times-circle"></i></a>
            </div>

            <div className="modal-body">
                {showCountry && <CountryList toggleContent={this.toggleContent}/>}

                {showLanguages && <RegionList country={country} flag={flag} languages={languages}
                                              toggleContent={this.toggleContentRegion.bind(this)}/>}

            </div>

    toggleContent = () => {
        this.setState({
            ...this.state,
            showCountry: !this.state.showCountry,
            showLanguages: !this.state.showLanguages,
            title: 'language',
            country: 'country',
            languages: [],
            flag: 'flag'
        });
    }

 <li key={i} onClick={this.props.toggleContent(c.country)}>
                                    <img src={c.flag}/> {c.country}
                                </li>

  toggleContent = (country) => {
        this.setState({
            ...this.state,
            showCountry: !this.state.showCountry,
            showLanguages: !this.state.showLanguages,
            title: 'language',
            country: country,
            languages: [],
            flag: 'flag'
        });
    }

 render() {
        var toggleContent  =   this.props.toggleContent;
        return (
            <div className="modal-wrapper">

                <ul className="country-list">
                    {this.state.data.map((item, index) => (
                        <li className='card' key={index}>
                            <span>{item.continent} </span>
                            <ul className="accordion-body">
                                {item.regions.map((c, i) => (
                                    **<li key={i} onClick={() => toggleContent(c.country,c.flag, c.languages, c.region)} >**
                                        <img src={c.flag}/> {c.country}
                                    </li>
                                ))}
                            </ul>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }