在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中共享重複響應組件的共同狀態

回答

相關問題