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调用方法将此状态（currentTileDetailOpened）的值设置为当前id的{{1}}。将此状态作为道具传递给Tile组件。在Tile的{{1}}方法中，检查道具而不是状态并将其渲染为

render

Answer 2

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

就像这样（你可以设置父母的状态（即：第一个共同的祖先）：

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

现在，在paginator内部，而不是正常的逻辑，它执行此操作：

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

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

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

2 个答案: