javascript - 在 React JS 中重复的 React 组件之间共享一个公共(public)状态

Question

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

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

如您所见，我在单击磁贴时切换磁贴详细信息，它工作正常。 我正在我的页面上呈现瓷砖的收集。如果我单击单个图 block ，它就可以正常工作。但是，如果我看到一 block 瓷砖的细节，我想要的是其他瓷砖细节应该始终被隐藏。你能指导我吗？全新的 React JS

Answer 1

您必须使用 Tile 的父组件来实现此目的。在父组件中有一个类似 currentlyTileDetailOpened 的状态。在 showTileDetails 中，通过 props 调用方法将此状态(currentlyTileDetailOpened)的值设置为当前 Tile 的 id。将此状态作为 Prop 传递给 Tile 组件。在 Tile 的 render 方法中，检查 prop 而不是 state 并像这样渲染它

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