在 React JS 中重复的 React 组件之间共享一个公共状态

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;

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

Answer 1

您必须使用 Tile 的父组件来实现此目的。在父组件中有一个像 currentlyTileDetailOpened 这样的状态。在 showTileDetails 中通过 props 调用方法将此状态（currentlyTileDetailOpened）的值设置为当前 Tile 的 id。将此状态作为道具传递给 Tile 组件。在 Tile 的 render 方法中，检查道具而不是状态并像

一样渲染它

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

Answer 2

我只是通过将页面信息存储在 Redux 中制作的分页控制单元来完成此操作，然后在第二个分页器中创建一个特殊选项，以便它只使用 Redux data 而不是 "double performing" 相同的工作（因此也不会与第一个分页器不同步）。

就像这样（你可以通过设置 parent 的状态（即：第一个共同祖先）来做同样的事情）：

    <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

bottom = true 道具实际上只是为了处理轻微的 CSS 差异，但你可以看到，第一个分页器创建细节，第二个简单地使用那些而不是复制。我已经告诉第二个组件跳过所有内部工作，只使用传入的数据。

在 React JS 中重复的 React 组件之间共享一个公共状态

sharing a common state among duplicate react component in React JS

javascript

reactjs

react-router

react-redux