wie zu verbergen und zeigen ein div in reagieren

Question

hallo ich bin neu zu reactjs und ich möchte lernen, wie ein div auf taste klicken und klicken. Dies ist der Ansichtsteil, den ich verstecken möchte

<div className="comment_usr_details"> 
    <div> 
     <img className="comment_usr_pic" src={profilePicture} alt=""/> 
    </div> 
    <div className="b"> 
     <p className="c">John Smith</p> 
     <p className="d">1 minutes ago</p> 
    </div> 
    <img className="e" src={downarrow} alt=""/> 
</div> 

Answer 1

In Reagieren Sie nur nicht diesen Teil des HTML. So macht es Teil eines bedingten:

{ this.props.display && 
    <div className="comment_usr_details"> 
    ... 
    </div> 
} 

Also, wenn this.props.display wahr ist die div-Shows und wenn es falsch ist, ist es nicht.

Answer 2

class HideAndShowDivOnClick extends React.Component { 

    state = { 
     showDiv: true 
    } 

    render() { 
     const { showDiv } = this.state 
     return (
      <div> 
       <button onClick={() => this.setState({ showDiv: !showDiv })}> 
        { showDiv ? 'hide' : 'show' } 
       </button> 
       { showDiv && (
        <div id="the div you want to show and hide">Peek a boo</div> 
       )} 
      </div> 
     ) 
    } 
} 

Answer 3

typische Art und Weise

Die üblichste Muster dazu rendert selektiv das Element basierend auf Zustand.

class Foo extends React.Component { 

    state = { showing: true }; 

    render() { 
     const { showing } = this.state; 
     return (
      <div> 
       <button onClick={() => this.setState({ showing: !showing })}>toggle</button> 
       { showing 
        ? <div>This is visible</div> 
        : null 
       } 
      </div> 
     ) 
    } 
} 

Alternative

Sie können auch einen Stil auf Zustand basiert. Dies ist weniger gebräuchlich, kann aber nützlich sein, wenn Sie komplexe Komponenten in diesem div-Beispiel haben. Ich hatte ein komplexes Nicht-Reagieren-D3-Diagramm innerhalb einer toggle-fähigen Komponente. Anfangs verwendete ich die erste Methode oben, verursachte aber ziemlich ein bisschen nacheilend, wenn man das div ein-/ausschaltet, weil D3 wieder hochfährt.

Im Allgemeinen den ersten Ansatz verwenden, es sei denn, Sie haben einen Grund, die Alternative zu verwenden.

class Foo extends React.Component { 

    state = { showing: true }; 

    render() { 
     const { showing } = this.state; 
     return (
      <div> 
       <button onClick={() => this.setState({ showing: !showing })}>toggle</button> 
       <div style={{ display: (showing ? 'block' : 'none') }}>This is visible</div> 
      </div> 
     ) 
    } 
} 

Hinweis

Ich verwende den ?: ternären Operator statt && - Ich bin ein überzeugter Anhänger, dass die Verwendung von ‚& &‘ ist auf einer Nebenwirkung von diesem Betreiber unter Berufung ein bestimmtes Ergebnis zu erzielen . Es funktioniert, versteh mich nicht falsch, aber der ternäre Operator ist meiner Meinung nach viel expressiver und wurde als Konditional konzipiert.

Dieses letzte Bit ist nur meine Meinung - also frage ich nicht die Verwendung von &&.