Javascript 在react JS中的重复react组件之间共享公共状态

我对组件的状态有一个疑问。我有一个瓷砖组件。单击瓷砖组件时，我正在切换瓷砖组件的详细信息

/* ---- Tile component ---- */

                import React, { Component } from 'react';
                import TileDetail from './TileDetail';

                class Tile extends Component {
                   constructor(props) {
                        super(props);

                        this.state = {
                            isTileDetailOpened:false
                        };
                        this.showTileDetails=this.showTileDetails.bind(this);
                    }

                    showTileDetails(networkName){
                     this.setState({isTileDetailOpened:!this.state.isTileDetailOpened});
                     alert(networkName);
                    }

                    render() {
                        const isTileDetailOpened = this.state.isTileDetailOpened;
                    return (
                    <li  className={ !this.state.isTileDetailOpened ? "tile-item" : "tile-item-with-detail" }> 
                       <div onClick={(e) => this.showTileDetails(this.props.objTile.network_name)}>
                        {this.props.objTile.network_name}
                       </div>
                          {this.state.isTileDetailOpened ? <TileDetail /> : <div/>}
                    </li>
                    );
                  }
                }

                export default Tile;

        /* ---- Tile Detail component ---- */
            import React, { Component } from 'react';


            class TileDetail extends Component {
              render() {
                return (
                 <div className="tile-detail">
                    <p>TileDetails</p>
                 </div>
                );
              }
            }
export default TileDetail;

/*----平铺组件--*/
从“React”导入React，{Component}；
从“/TileDetail”导入TileDetail；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isTileDetailOpened:错误
};
this.showTileDetails=this.showTileDetails.bind（this）；
}
showTileDetails（网络名称）{
this.setState（{isTileDetailOpened:！this.state.isTileDetailOpened}）；
警报（网络名称）；
}
render（）{
const isTileDetailOpened=this.state.isTileDetailOpened；
返回(

this.showTileDetails（this.props.objfile.network\u name）}>
{this.props.objTile.network_name}
{this.state.isTileDetailOpened？：}

);
}
}
导出默认瓷砖；
/*----瓷砖详图构件----*/
从“React”导入React，{Component}；
类TileDetail扩展组件{
render（）{
返回(
瓷砖尾巴

);
}
}
导出默认平铺细节；

正如你所看到的，我正在切换瓷砖点击的瓷砖细节和它的工作罚款。 我正在渲染我的页面上收集的瓷砖。如果我点击单个瓷砖，效果会很好。但是，如果我看到一个瓷砖的细节，那么其他瓷砖的细节应该始终隐藏。

---

你能在这方面指导我吗。React JS是全新的您必须使用

互动程序的父组件来实现这一点。在父组件中，具有类似于
CurrentlyTileDetailOpen
的状态。在
showTileDetails
中，通过道具调用一个方法，将此状态（CurrentlyTiledetailOpen）的值设置为当前
磁贴的
id
。将此状态作为道具传递给
平铺
组件。在
平铺
的
渲染
方法中，检查道具而不是状态，并按如下方式渲染

{this.props.currentlyOpenedTile === tile.id ? <TileDetail /> : null}

{this.props.currentlypenedtile===tile.id？：null}
我只是用一个分页控制单元来实现这一点，我将页面信息存储在Redux中，然后在第二个分页器中设置一个特殊选项，以便它只使用
Redux数据，而不是“双重执行”相同的工作（因此也不会与第一个分页器不同步）

它是这样的（您可以通过设置父级的状态（即：第一个公共祖先）执行相同的操作）：

bottom=true
道具实际上只是处理一个小小的CSS差异，但是您可以看到，第一个分页器创建细节，第二个分页器只是使用这些细节，而不是复制。我已经告诉第二个组件跳过所有内部工作，只使用传入的数据。
您需要存储
isTIleDetail在
TileDetail组件内部打开。尝试一下。它会起作用。如果你不知道怎么做，请告诉我。谢谢，伙计！工作起来很有魅力。只是想知道这是否是一种很好的方法。？Redux是我们可以在这里使用的东西？
    <Pagination
      pageSize={25}
      items={(!this.state.fuzzyMatches.length)
        ? this.props.businesses
        : this.state.fuzzyMatches}
      onChangePage={(pagerState) => this.handlePageChange(pagerState)}
      activePage={this.props.activePage}
      isEmpty={((this.state.search.length > 0) &&
        (this.state.fuzzyMatches.length === 0))}
      bottom                                           // bottom = true
      bottomData={this.props.pagination}               // get data from here
    />

render() {
  const pager = (this.props.bottom)
    ? this.props.bottomData
    : this.state.pager