在React JS中共享重复响应组件的共同状态

我对组件状态有一个疑问。我有一个瓷砖组件。在点击拼贴组件时，我正在切换拼贴组件的细节。在React JS中共享重复响应组件的共同状态

/* ---- 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上的新功能

来源

2017-04-18 Bharat Sewani

您需要将'isTileDetailOpened'存储在'TileDetail'组件中。试着这样做。它会工作。如果你无法弄清楚，请告诉我 – iamsaksham

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

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

来源

2017-04-18 08:18:00 Panther

感谢哥们！像魅力一样工作。只是想知道它是否是一个好方法。 ?? Redux是我们可以在这里使用的东西？ –

我刚刚与我通过存储在终极版的页面信息，然后制作在一个特殊的选项做了分页控制单元这样做第二个分页符，以便它只使用Redux data而不是“双重执行”相同的工作（因此也不会与第一个分页程序不同步）。

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

<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差异，但你可以看到，第一个分页程序创建的细节，而第二个简单地使用那些不是重复的。我已经告诉第二组分跳过所有的内部工作和公正使用传入的数据。

来源

2017-11-06 18:41:03 agm1984

在React JS中共享重复响应组件的共同状态

回答

相关问题