Afișați sau ascundeți elementul în React (Programare, Javascript, Reactjs)

user1725382 a intrebat.

Mă încurc cu React.js pentru prima dată și nu găsesc o modalitate de a arăta sau ascunde ceva pe o pagină prin intermediul evenimentului click. Nu încarc nici o altă bibliotecă în pagină, așa că sunt în căutarea unei modalități native folosind biblioteca React. Iată ce am până acum. Aș dori să arăt div-ul de rezultate atunci când se declanșează evenimentul click.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

Comentarii

  • Comentariul acceptat folosește tehnologie nouă pentru a face ceea ce tehnologia existentă la nivel nativ poate face atât mai ușor, mai rapid, cât și partajabil cu alte limbaje și biblioteci. Gestionarea acestui aspect cu CSS standard este aproape sigur răspunsul cel mai bun. –  > Por John Haugeland.
  • @JohnHaugeland, cel mai bun răspuns atunci când se utilizează cadrul React este răspunsul acceptat, mergând tot în stilul React, care are funcții de curățare pe care în unele cazuri trebuie să le faceți. Nu este o practică bună să ai componente care se ascund pur și simplu în întuneric. Dacă amesteci lucruri, este mai bine să mergi tot nativ, care este întotdeauna mai rapid decât orice altceva. –  > Por Claudiu Hojda.
  • Nu, chiar nu este așa. Să folosești react pentru a reinventa CSS este o idee proastă. –  > Por John Haugeland.
  • În plus, se pare că ai ratat complet ideea a ceea ce am spus, și anume să folosești CSS pentru a ascunde și afișa elementul, mai degrabă decât să folosești React pentru a-l elimina fizic. Tu puteți folosiți React pentru a folosi CSS pentru a ascunde și afișa elementul la fel de ușor: <div style={{display:this.props.example}}/>. –  > Por John Haugeland.
  • @ClaudiuHojda ca elementele să se ascundă în întuneric este de fapt o practică foarte bună în unele cazuri, mă gândesc la navigația responsivă, unde ai nevoie ca link-urile să rămână în HTML chiar dacă sunt ascunse cu css –  > Por Toni Leigh.
29 răspunsuri
Douglas

React circa 2020

În onClick callback, apelați apelul de stat a cârligului pentru a actualiza starea și a reda din nou:

JSFiddle

React circa 2014

Cheia este să actualizați starea componentei în gestionarul de click folosind setState. Atunci când se aplică modificările de stare, se va aplica funcția render este apelată din nou cu noua stare:

JSFiddle

Comentarii

  • Da, bună observație despre starea vs props. O modalitate mai bună de a face acest lucru ar fi ca în tutorialul de aici, unde bara de căutare și tabelul de rezultate sunt frați în loc să punem Rezultatele în interiorul Căutării: facebook.github.io/react/docs/thinking-in-react.html –  > Por Douglas.
  • 57

  • După cum s-a menționat în celălalt răspuns, inserția/ștergerea sunt mult mai lente decât simpla mascare a clasei. –  > Por John Haugeland.
  • Cred că observațiile lui Johns trebuie revizuite. Eu am ales răspunsul dorit, care a fost curat și care „părea” mai apropiat de reacție. Cu toate acestea, nu am reușit să setez stări inițiale și nimic util pe o componentă nemontată. În schimb, mă gândesc să folosesc css pentru a ascunde lucrurile. Ascultătorii de pe componentele nemontate vor eșua în tăcere, ceea ce mi-a cauzat o mare pierdere de timp astăzi. –  > Por a aterizat.
  • Asta înseamnă că react va reda componenta atunci când se schimbă stilul ( este setat pentru a arăta / ascunde ) !? –  > Por alex.
  • @Douglas, dacă nu cumva mi-a scăpat, acest mod nu permite revenirea la original. Cred că PO poate că nu a vrut OP, dar cum pot include acest lucru? –  > Por Viermele.
John Haugeland
<style type="text/css">
    .hidden { display:none; }
</style>
render: function() {
    return (
      <div className={this.props.shouldHide ? 'hidden' : ''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div>
    );
}

// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

Comentarii

  • Este mai bine să returnezi condiționat null ca în răspunsul lui Douglas. Acest lucru îi permite lui React să îl elimine în întregime din DOM. În cazul dvs. div & conținutul său este încă în DOM, doar că nu este afișat. Acest lucru poate avea implicații asupra performanței. –  > Por pmont.
  • 140

  • Implicațiile asupra performanței sunt mult mai grave pentru adăugarea și eliminarea unui element dom decât pentru ascunderea și afișarea acestuia. Sunt conștient de diferența dintre abordarea sa și a mea și cred că ați înțeles exact greșit acest lucru. Vă rugăm să vă gândiți să vă faceți timp pentru a defini „implicațiile asupra performanței” și apoi să le măsurați. –  > Por John Haugeland.
  • „Refluxurile sunt garantate cu adăugarea/eliminarea” – Nu cu elemente absolut poziționate, care este modul în care Famous își obține performanța incredibilă. Dar aveți un punct de vedere valabil în ceea ce privește metricile. –  > Por pmont.
  • pentru ceea ce contează, acest lucru este menționat în documentele react aici: facebook.github.io/react/docs/… –  > Por Brad Parks.
  • 94

  • Deci, tocmai am testat returnarea null vs. setarea unei clase ascunse cu 161 de noduri dom destul de mari. Este semnificativ mai rapid să folosești o clasă decât să elimini nodul. –  > Por Jonathan Rowny.
Lyubomir

Iată o sintaxă alternativă pentru operatorul ternar:

{ this.state.showMyComponent ? <MyComponent /> : null }

este echivalent cu:

{ this.state.showMyComponent && <MyComponent /> }

Aflați de ce


De asemenea, sintaxa alternativă cu display: 'none';

<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />

Cu toate acestea, dacă folosiți în mod excesiv display: 'none', , acest lucru duce la poluarea DOM și, în cele din urmă, vă încetinește aplicația.

Comentarii

  • Atenție! Utilizați abordarea „double ampersand(&&)” numai pentru valorile bool. { this.state.myComponents.length && <MyComponent /> } va reda 0, dacă array-ul myComponents este gol (de exemplu) –  > Por Mega Proger.
  • @MegaProger în acest caz se transformă în boolean cu !! adică. { !!this.state.myComponents.length && <MyComponent /> } –  > Por Pawel.
Adam Pietrasiak

Aici este abordarea mea.

import React, { useState } from 'react';

function ToggleBox({ title, children }) {
  const [isOpened, setIsOpened] = useState(false);

  function toggle() {
    setIsOpened(wasOpened => !wasOpened);
  }

  return (
    <div className="box">
      <div className="boxTitle" onClick={toggle}>
        {title}
      </div>
      {isOpened && (
        <div className="boxContent">
          {children}
        </div>
      )}
    </div>
  );
}

În codul de mai sus, pentru a realiza acest lucru, folosesc un cod ca:

{opened && <SomeElement />}

Care va reda SomeElement numai dacă opened este adevărat. Funcționează datorită modului în care JavaScript rezolvă condițiile logice:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise (and false will be ignored by react during rendering)
// be careful with 'falsy' values eg
const someValue = 0;
someValue && <SomeElement /> // will output 0, which will be rednered by react
// it'll be better to:
!!someValue && <SomeElement /> // will render nothing as we cast the value to boolean

Motive pentru a folosi această abordare în loc de CSS ‘display: none’;

  • Deși ar putea fi „mai ieftin” să ascundeți un element cu CSS – în acest caz, elementul „ascuns” este încă „viu” în lumea react (ceea ce ar putea face ca acest lucru să fie mult mai costisitor).
    • înseamnă că, în cazul în care propulsia elementului părinte (de ex. <TabView>) se va schimba – chiar dacă vedeți doar o singură filă, toate cele 5 file vor fi redate din nou.
    • elementul ascuns ar putea avea în continuare unele metode de ciclu de viață în execuție – de exemplu, ar putea prelua unele date de pe server după fiecare actualizare, chiar dacă nu este vizibil.
    • elementul ascuns ar putea bloca aplicația dacă primește date incorecte. Acest lucru se poate întâmpla deoarece puteți „uita” de nodurile invizibile atunci când actualizați starea.
    • s-ar putea să setați din greșeală un stil de afișare greșit atunci când faceți elementul vizibil – de exemplu, un div este „display: flex” în mod implicit, dar veți seta „display: block” din greșeală cu display: invisible ? 'block' : 'none' ceea ce ar putea strica aspectul
    • utilizând someBoolean && <SomeNode /> este foarte simplu de înțeles și de motivat, în special dacă logica legată de afișarea sau nu a unui element devine complexă.
    • în multe cazuri, doriți să „resetați” starea elementului atunci când acesta apare din nou. de exemplu, puteți avea un cursor pe care doriți să îl setați în poziția inițială de fiecare dată când este afișat. (dacă acesta este comportamentul dorit pentru a păstra starea anterioară a elementului, chiar dacă este ascuns, ceea ce, IMO, este rar – într-adevăr, aș lua în considerare utilizarea CSS dacă reamintirea acestei stări într-un mod diferit ar fi complicată)

Comentarii

  • Acesta este un exemplu excelent! Un mic lucru, boxContent ar trebui să fie className=”boxContent” –  > Por Bhetzie.
  • Există un bug chiar aici: this.setState({isOpened: !isOpened});. Nu depindeți de starea în sine, atunci când modificați starea. Iată un exemplu bun: reactjs.org/docs/… Deci, ar trebui să fie: this.setState( s => ({isOpened: !s.isOpened}) ). Observați funcția săgeată din interiorul setState. –  > Por arcol.
  • Aveți vreo sursă/benchmark/exemplu care să confirme acest lucru „Dacă setați display: none – elementul este încă redat de react și adăugat la DOM – ceea ce poate avea un impact negativ asupra performanței.” ? –  > Por neiya.
  • @neiya Nu am. CSS ar putea fi mai performant cu elemente mici, dar destul de des doriți să redați opțional părți mari de conținut, de exemplu, tab-ul. De asemenea, în timp ce unele elemente sunt ascunse cu CSS – ele sunt încă vii în lumea react. Aceasta înseamnă că ar putea să-și actualizeze starea, să aducă unele date etc., ceea ce ar putea fi costisitor și ar putea duce la un comportament neașteptat. Și este IMO de fapt foarte simplu de implementat. –  > Por Adam Pietrasiak.
squiddle

cu cea mai nouă versiune react 0.11 puteți, de asemenea, să returnați null pentru a nu avea conținut redat.

Redarea la null

daniloprates

Aceasta este o modalitate frumoasă de a utiliza DOM-ul virtual:

class Toggle extends React.Component {
  state = {
    show: true,
  }

  toggle = () => this.setState((currentState) => ({show: !currentState.show}));

  render() {
    return (
      <div>
        <button onClick={this.toggle}>
          toggle: {this.state.show ? 'show' : 'hide'}
        </button>    
        {this.state.show && <div>Hi there</div>}
      </div>
     );
  }
}

Exemplu aici

Folosind cârligele React:

const Toggle = () => {
  const [show, toggleShow] = React.useState(true);

  return (
    <div>
      <button
        onClick={() => toggleShow(!show)}
      >
        toggle: {show ? 'show' : 'hide'}
      </button>    
      {show && <div>Hi there</div>}
    </div>
  )
}

Exemplu aici

Comentarii

  • Îmi place acest răspuns simplu. Păcat că nu a funcționat vioara. –  > Por Juan Lanus.
  • Așa cum am menționat într-un răspuns anterior, nu ar trebui să depindeți de starea în this.setState(). –  > Por Dan Dascalescu.
  • simplu și eficient cu cârlige –  > Por madsongr.
ccnokes

Am creat o mică componentă care se ocupă de acest lucru pentru tine: react-toggle-display

Setează atributul de stil la display: none !important în funcție de atributul hide sau show props.

Exemplu de utilizare:

var ToggleDisplay = require('react-toggle-display');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search />, document.body);

Kelnor

Există deja câteva răspunsuri excelente, dar nu cred că au fost explicate foarte bine, iar câteva dintre metodele prezentate conțin unele capcane care ar putea deruta oamenii. Așa că voi trece în revistă cele trei modalități principale (plus o opțiune off-topic) de a face acest lucru și voi explica avantajele și dezavantajele. Scriu asta mai ales pentru că opțiunea 1 a fost recomandată foarte mult și există o mulțime de probleme potențiale cu această opțiune dacă nu este folosită corect.

Opțiunea 1: Renderizare condiționată în părintele.

Nu-mi place această metodă decât dacă nu aveți de gând să redați componenta doar o singură dată și să o lăsați acolo. Problema este că va face ca react să creeze componenta de la zero de fiecare dată când comutați vizibilitatea.Iată exemplul. LogoutButton sau LoginButton sunt redate condiționat în LoginControlul părinte. Dacă rulați acest lucru, veți observa că constructorul este apelat la fiecare clic pe buton. https://codepen.io/Kelnor/pen/LzPdpN?editors=1111

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Acum, React este destul de rapid în crearea componentelor de la zero. Cu toate acestea, tot trebuie să apeleze codul dvs. atunci când le creează. Deci, dacă codul dvs. constructor, componentDidMount, render, etc. este costisitor, atunci va încetini semnificativ afișarea componentei. De asemenea, înseamnă că nu puteți utiliza acest lucru cu componente cu stare, în cazul în care doriți ca starea să fie păstrată atunci când este ascunsă (și restaurată atunci când este afișată.) Singurul avantaj este că componenta ascunsă nu este creată deloc până când nu este selectată. Astfel, componentele ascunse nu vor întârzia încărcarea inițială a paginii. De asemenea, pot exista cazuri în care doriți ca o componentă cu stare să se reseteze atunci când este activată. În acest caz, aceasta este cea mai bună opțiune.

Opțiunea 2: Redare condiționată în copil

Acest lucru creează ambele componente o singură dată. Apoi scurtcircuitează restul codului de redare dacă componenta este ascunsă. Puteți, de asemenea, să scurtcircuitați altă logică în alte metode, folosind prop-ul vizibil. Observați consola.log din pagina de codare. https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        <LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
        <LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    if(!this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    if(this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Acum, dacă logica de inițializare este rapidă și copiii sunt fără stare, atunci nu veți vedea o diferență în ceea ce privește performanța sau funcționalitatea. Cu toate acestea, de ce să faci React să creeze o componentă nouă la fiecare comutare? Totuși, dacă inițializarea este costisitoare, opțiunea 1 o va rula de fiecare dată când comutați o componentă, ceea ce va încetini pagina la comutare. Opțiunea 2 va rula toate inițierile componentei la prima încărcare a paginii. Încetinind această primă încărcare. Ar trebui să rețineți din nou. Dacă afișați componenta o singură dată în funcție de o condiție și nu o comutați, sau dacă doriți ca aceasta să se reseteze la comutare, atunci opțiunea 1 este bună și probabil cea mai bună opțiune.

Totuși, dacă încărcarea lentă a paginii este o problemă, înseamnă că aveți un cod scump într-o metodă de ciclu de viață și, în general, aceasta nu este o idee bună. Puteți, și probabil ar trebui, să rezolvați problema încărcării lente a paginii mutând codul scump în afara metodelor de ciclu de viață. Mutați-l într-o funcție asincronă care este lansată de ComponentDidMount și puneți-l într-o variabilă de stare cu setState(). Dacă variabila de stare este nulă și componenta este vizibilă, atunci funcția de redare trebuie să returneze un spațiu rezervat. În caz contrar, redă datele. În acest fel, pagina se va încărca rapid și va popula filele pe măsură ce se încarcă. Puteți, de asemenea, să mutați logica în părintele și să împingeți rezultatele către copii ca elemente de recuzită. În acest fel, puteți prioritiza ce file sunt încărcate mai întâi. Sau puteți pune în memoria cache rezultatele și să executați logica numai la prima afișare a unei componente.

Opțiunea 3: Ascunderea clasei

Ascunderea claselor este probabil cea mai ușor de implementat. După cum am menționat, trebuie doar să creați o clasă CSS cu display: none și să atribuiți clasa pe baza prop. Dezavantajul este că întregul cod al fiecărei componente ascunse este apelat și toate componentele ascunse sunt atașate la DOM. (Opțiunea 1 nu creează deloc componentele ascunse. Iar opțiunea 2 scurtcircuitează codul inutil atunci când componenta este ascunsă și elimină complet componenta din DOM). Se pare că acest lucru este mai rapid la comutarea vizibilității, conform unor teste efectuate de comentatori la alte răspunsuri, dar nu mă pot pronunța în acest sens.

Opțiunea 4: O singură componentă, dar schimbați Props. Sau poate nici o componentă deloc și să cachezi HTML.

Aceasta nu va funcționa pentru toate aplicațiile și este în afara subiectului, deoarece nu este vorba despre ascunderea componentelor, dar ar putea fi o soluție mai bună pentru unele cazuri de utilizare decât ascunderea. Să spunem că aveți tab-uri. Ar putea fi posibil să scrieți o componentă React și să folosiți doar props pentru a schimba ceea ce este afișat în fila respectivă. De asemenea, ați putea salva JSX în variabile de stare și să utilizați un prop pentru a decide ce JSX să returnați în funcția de redare. Dacă JSX-ul trebuie să fie generat, atunci faceți acest lucru și puneți-l în cache în părintele și trimiteți-l pe cel corect ca prop. Sau generați-l în copil și păstrați-l în memoria cache în starea copilului și utilizați props pentru a-l selecta pe cel activ.

Brigandă

Setați o valoare booleană în stare (de exemplu, „show)”, apoi faceți:

var style = {};
if (!this.state.show) {
  style.display = 'none'
}

return <div style={style}>...</div>

Comentarii

  • Am încercat acest lucru, dar evenimentul de clic nu a schimbat css-ul pentru a afișa blocul. Nu știu exact cum să realizez acest lucru. Orice sfaturi suplimentare? –  > Por user1725382.
  • Acest lucru implică efectuarea de modificări active în tabelul de reguli de stil. Este mult mai bine să aveți o singură regulă existentă pe care o puteți activa și dezactiva, care nu face parte din proprietățile dinamice ale nodului dom. –  > Por John Haugeland.
  • Chiar nu contează dacă folosiți o clasă sau un stil aici… păreți foarte preocupat de acest lucru. –  > Por Brigand.
  • Utilizarea unei clase este mai rapidă cu câteva ordine de mărime. Este bine de știut. –  > Por Jason Rice.
  • S-ar putea folosi doar nume de clase condiționate cu: github.com/JedWatson/classnames –  > Por backdesk.
Dinamic

Cea mai bună practică este mai jos, conform documentației:

{this.state.showFooter && <Footer />}

Redă elementul numai atunci când starea este validă.

Comentarii

  • Acest răspuns a fost dat deja cu un an mai devreme, deci este în regulă să îl ștergeți acum. –  > Por Dan Dascalescu.
superup

O metodă simplă de a afișa/ ascunde elemente în React folosind Hooks

const [showText, setShowText] = useState(false);

Acum, să adăugăm puțină logică la metoda noastră de randare:

{showText && <div>This text will show!</div>}

Și

onClick={() => setShowText(!showText)}

Bună treabă.

Comentarii

  • Aceasta este cea mai bună! –  > Por Deborah.
StefanBob

Exemplu simplu de ascundere/afisare cu React Hooks: (îmi cer scuze că nu există nicio vioară)

const Example = () => {

  const [show, setShow] = useState(false);

  return (
    <div>
      <p>Show state: {show}</p>
      {show ? (
        <p>You can see me!</p>
      ) : null}
      <button onClick={() => setShow(!show)}>
    </div>
  );

};

export default Example;

sgr
class Toggle extends React.Component {
  state = {
    show: true,
  }

  render() {
    const {show} = this.state;
    return (
      <div>
        <button onClick={()=> this.setState({show: !show })}>
          toggle: {show ? 'show' : 'hide'}
        </button>    
        {show && <div>Hi there</div>}
      </div>
     );
  }
}

Akanksha gore
   class FormPage extends React.Component{
      constructor(props){
           super(props);
           this.state = {
             hidediv: false
           }
      }

     handleClick = (){
       this.setState({
          hidediv: true
        });
      }

      render(){
        return(
        <div>
          <div className="date-range" hidden = {this.state.hidediv}>
               <input type="submit" value="Search" onClick={this.handleClick} />
          </div>
          <div id="results" className="search-results" hidden = {!this.state.hidediv}>
                        Some Results
           </div>
        </div>
        );
      }
  }

Alireza

Încep cu această declarație din partea echipei React:

În React, puteți crea componente distincte care să încapsuleze comportamentul de care aveți nevoie. Apoi, puteți reda doar unele dintre ele, în funcție de starea aplicației dumneavoastră.

Redarea condiționată în React funcționează în același mod în care funcționează condițiile în JavaScript. Folosiți operatori JavaScript, cum ar fi if sau operatorul condițional, pentru a crea elemente care să reprezinte starea curentă și lăsați React să actualizeze interfața utilizator pentru a se potrivi cu acestea.

Practic, trebuie să afișați componenta atunci când se face clic pe buton, puteți face acest lucru în două moduri, folosind React pur sau folosind CSS, folosind React pur, puteți face ceva de genul codului de mai jos în cazul dvs., astfel încât, în prima rulare, rezultatele nu sunt afișate ca hideResults este true, dar, dacă se face clic pe buton, starea se va schimba și hideResults este false și componenta va fi redată din nou cu noile condiții de valoare, aceasta este o utilizare foarte comună a schimbării vizualizării componentelor în React…

var Search = React.createClass({
  getInitialState: function() {
    return { hideResults: true };
  },

  handleClick: function() {
    this.setState({ hideResults: false });
  },

  render: function() {
    return (
      <div>
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.state.hideResults && <Results /> }
      </div> );
  }

});

var Results = React.createClass({
  render: function() {
    return (
    <div id="results" className="search-results">
      Some Results
    </div>);
   }
});

ReactDOM.render(<Search />, document.body);

Dacă doriți să studiați în continuare redarea condiționată în React, aruncați o privire aici.

Comentarii

  • acesta ar trebui să fie cel mai elegant mod! –  > Por al cincilea.
Nicholas Porter

Dacă doriți să vedeți cum se poate TOGGLE afișarea unei componente, verificați această vioară.

http://jsfiddle.net/mnoster/kb3gN/16387/

var Search = React.createClass({
    getInitialState: function() {
        return { 
            shouldHide:false
        };
    },
    onClick: function() {
        console.log("onclick");
        if(!this.state.shouldHide){
            this.setState({
                shouldHide: true 
            })
        }else{
                    this.setState({
                shouldHide: false 
            })
        }
    },
render: function() {
    return (
      <div>
        <button onClick={this.onClick}>click me</button>
        <p className={this.state.shouldHide ? 'hidden' : ''} >yoyoyoyoyo</p>
      </div>
    );
}
});

ReactDOM.render( <Search /> , document.getElementById('container'));

vinga

În unele cazuri, ar putea fi utilă o componentă de ordin superior:

Creați o componentă de ordin superior:

export var HidableComponent = (ComposedComponent) => class extends React.Component {
    render() {
        if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
            return null;
        return <ComposedComponent {...this.props}  />;
    }
};

Extindeți propria componentă:

export const MyComp= HidableComponent(MyCompBasic);

Apoi o puteți utiliza astfel:

<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />

Acest lucru reduce un pic de boilerplate și impune respectarea convențiilor de denumire, însă vă rugăm să fiți conștienți de faptul că MyComp va fi în continuare instanțiat – modul de omitere a fost menționat mai devreme:

{ !hidden && <MyComp ... /> }

UtkarshPramodGupta

Utilizați ref și manipulați CSS

O modalitate ar putea fi utilizarea funcției React’s ref și să manipulați clasa CSS utilizând API-ul browserului. Avantajul său este acela de a evita redarea în React dacă singurul scop este de a ascunde/afișa un element DOM la apăsarea unui buton.

// Parent.jsx
import React, { Component } from 'react'

export default class Parent extends Component {
    constructor () {    
        this.childContainer = React.createRef()
    }

    toggleChild = () => {
        this.childContainer.current.classList.toggle('hidden')
    }

    render () {
        return (
            ...

            <button onClick={this.toggleChild}>Toggle Child</button>
            <div ref={this.childContainer}>
                <SomeChildComponent/>
            </div>

            ...
        );
    }
}


// styles.css
.hidden {
    display: none;
}

PS Corectați-mă dacă greșesc 🙂

Comentarii

farynaa

Am reușit să folosesc proprietatea css „hidden”. Nu știu despre posibilele dezavantaje.

export default function App() {
    const [hidden, setHidden] = useState(false);
    return (
      <div>
        <button onClick={() => setHidden(!hidden)}>HIDE</button>
        <div hidden={hidden}>hidden component</div>
      </div>
    );
  }

Mohammad Basit

Acest lucru poate fi realizat și în felul următor (modalitate foarte ușoară)

 class app extends Component {
   state = {
     show: false
   };
 toggle= () => {
   var res = this.state.show;
   this.setState({ show: !res });
 };
render() {
  return(
   <button onClick={ this.toggle }> Toggle </button>
  {
    this.state.show ? (<div> HELLO </div>) : null
  }
   );
     }

Comentarii

  • Vă rugăm să citiți despre setarea „state based on the previous state” la adresa reactjs.org/docs/react-component.html#setstate. De asemenea, ar fi frumos să se stabilească indentarea la sfârșit. –  > Por Dan Dăscălescu.
qinyuanbin

Utilizați rc-if-else modulul

npm install --save rc-if-else
import React from 'react';
import { If } from 'rc-if-else';

class App extends React.Component {
    render() {
        return (
            <If condition={this.props.showResult}>
                Some Results
            </If>
        );
    }
}

Zayn

Utilizați această sintaxă simplă și scurtă:

{ this.state.show && <MyCustomComponent /> }

Comentarii

  • Poate că ai putea să dezvolți sintaxa lean & scurtă pentru a explica cum funcționează. Oh, stai, asta a fost făcut într-un răspuns cu 3 ani mai devreme. Ce aduce din nou răspunsul tău la masă? –  > Por Dan Dăscălescu.
Remi Prasanna

Iată că vine soluția simplă, eficientă și cea mai bună, cu un Classless React Component pentru afișarea/ ascunderea elementelor. Se utilizează React-Hooks care este disponibil în cea mai recentă versiune create-react-app proiect care utilizează React 16

import React, {useState} from 'react';
function RenderPara(){
const [showDetail,setShowDetail] = useState(false);

const handleToggle = () => setShowDetail(!showDetail);

return (
<React.Fragment>
    <h3>
        Hiding some stuffs 
    </h3>
    <button onClick={handleToggle}>Toggle View</button>
   {showDetail && <p>
        There are lot of other stuffs too
    </p>}
</React.Fragment>)

}  
export default RenderPara;

Codare fericită 🙂

ThomasP1988

Dacă folosiți bootstrap 4, puteți ascunde elementul în acest fel

className={this.state.hideElement ? "invisible" : "visible"}

Snivio

acest exemplu arată cum poți comuta între componente folosind un toggle care se schimbă după fiecare 1secundă

import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Component1 = () =>(
  <div>
    <img 
src="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" />
   </div>
)

const Component2 = () => {
  return (
    <div>
       <img 
src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2e/12ccse.jpg/250px- 
12ccse.jpg" />
  </div>
   )

 }

 class App extends Component {
   constructor(props) {
     super(props);
    this.state = { 
      toggleFlag:false
     }
   }
   timer=()=> {
    this.setState({toggleFlag:!this.state.toggleFlag})
  }
  componentDidMount() {
    setInterval(this.timer, 1000);
   }
  render(){
     let { toggleFlag} = this.state
    return (
      <Fragment>
        {toggleFlag ? <Component1 /> : <Component2 />}
       </Fragment>
    )
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Comentarii

  • Ce-i cu URL-ul ăsta ciudat al imaginii? Poți folosi un serviciu standard de imagine de tip placeholder, cum ar fi placeimg.com –  > Por Dan Dăscălescu.
Naved Khan
//use ternary condition

{ this.state.yourState ? <MyComponent /> : null } 

{ this.state.yourState && <MyComponent /> }

{ this.state.yourState == 'string' ? <MyComponent /> : ''}

{ this.state.yourState == 'string' && <MyComponent /> }

//Normal condition

if(this.state.yourState){
 return <MyComponent />
}else{
  return null;
}

Alan Paul Mathew
var Search= React.createClass({
 getInitialState: () => { showResults: false },
 onClick: () => this.setState({ showResults: true }),
 render: function () {
   const { showResults } = this.state;
   return (
     <div className="date-range">
       <input type="submit" value="Search" onClick={this.handleClick} />
       {showResults && <Results />}
     </div>
   );
 }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

Comentarii

  • Poți explica ce ai făcut și de ce este mai bun decât răspunsul acceptat ? –  > Por Seblor.
Mohammad Golkar
class App extends React.Component {
  state = {
    show: true
  };

  showhide = () => {
    this.setState({ show: !this.state.show });
  };

  render() {
    return (
      <div className="App">
        {this.state.show && 
          <img src={logo} className="App-logo" alt="logo" />
        }
        <a onClick={this.showhide}>Show Hide</a>
      </div>
    );
  }
}

Comentarii

  • Puteți adăuga explicații pentru o mai bună înțelegere? Vă mulțumim! –  > Por Shanteshwar Inde.
  • @ShanteshwarInde: acest lucru dublează aceeași idee dintr-un răspuns anterior, inclusiv utilizarea incorectă a setState în funcție de starea curentă. A se vedea reactjs.org/docs/react-component.html#setstate: „Dacă aveți nevoie să setați starea în funcție de starea anterioară, citiți despre argumentul updater”. –  > Por Dan Dăscălescu.
Venka

Comentarii

  • Deși acest cod poate răspunde la întrebare, furnizarea unui context suplimentar cu privire la motivul și/sau modul în care acest cod răspunde la întrebare îmbunătățește valoarea sa pe termen lung. –  > Por xiawi.
  • Ce a spus @xiawi. De asemenea, vă rugăm să utilizați const în loc de var atunci când declarați constante. –  > Por Dan Dascalescu.