teilen einen gemeinsamen Zustand unter doppelten Reaktionskomponente in React JS

Question

Ich habe einen Zweifel über den Zustand der Komponente. Ich habe eine Kachelkomponente. Beim Klicken auf die Kachelkomponente schalte ich die Details der Kachelkomponente um.

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

Wie Sie sehen können, bin ich Makeln die Fliese Detail auf Klick auf Fliese klicken und seine Arbeit gut. Ich rendere das Sammeln von Kacheln auf meiner Seite. Und es funktioniert gut, wenn ich auf einzelne Fliesen klicke. Aber was ich will, wenn ich das Detail einer Fliese sehe, sollten andere Fliesendetails immer versteckt sein. Könnten Sie mich bitte hierüber leiten? Komplett neu auf React JS

Answer 1

Sie müssen die Elternkomponente der Tile verwenden, um dies zu erreichen. In der Elternkomponente haben Sie einen Zustand wie currentlyTileDetailOpened. In showTileDetails rufen Sie eine Methode über Requisiten auf, um den Wert dieses Status (zZDetailOpened) auf id des aktuellen Tile zu setzen. Übergeben Sie diesen Status an die Komponente Tile als Prop. In render Verfahren von Tile, überprüfen Sie die Stütze statt Zustand und macht es wie

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

Answer 2

ich dies nur mit einer Paginierung Steuereinheit habe ich durch das Speichern der Seite Info in Redux gemacht, und dann eine spezielle Option im Entstehen zweiten Paginator, so dass es nur die Redux data anstelle von "Double Performing" die gleiche Arbeit verwendet (und damit auch nicht mit dem ersten Paginator nicht synchron).

Es ist so (Sie das gleiche tun könnten die Eltern Zustand mit Verlängerung (dh: zuerst gemeinsame Vorfahren):

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

nun innerhalb des paginator, anstelle der normalen Logik, tut es dies:

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

die bottom = true prop ist eigentlich nur eine leichte CSS Unterschied zu handhaben, aber man kann sehen, der erste paginator die Details erzeugt, und die zweite verwendet einfach die, statt zu duplizieren. ich habe die zweite Komponente gesagt überspringen all seine interne Arbeit und einfach Verwenden Sie die Daten, die übergeben werden.