Element in React ein- oder ausblenden

Ich spiele zum ersten Mal mit React.js herum und kann keine Möglichkeit finden, etwas auf einer Seite über ein Klickereignis ein- oder auszublenden. Ich lade keine andere Bibliothek auf die Seite, daher suche ich nach einer nativen Möglichkeit, die React-Bibliothek zu verwenden. Das habe ich bisher. Ich möchte die Ergebnisse div anzeigen, wenn das Klickereignis ausgelöst wird.

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);

Reagiere um 2020

onClickRufen Sie im Rückruf die Setter-Funktion des Status- Hooks auf, um den Status zu aktualisieren und erneut zu rendern:

const Search = () => {
  const [showResults, setShowResults] = React.useState(false)
  const onClick = () => setShowResults(true)
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  )
}

const Results = () => (
  <div id="results" className="search-results">
    Some Results
  </div>
)

ReactDOM.render(<Search />, document.querySelector("#container"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

Reagiere um 2014

Der Schlüssel besteht darin, den Status der Komponente im Klick-Handler mit zu aktualisieren setState. Wenn die Statusänderungen angewendet werden, wird die renderMethode mit dem neuen Status erneut aufgerufen:

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} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

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

Hier ist eine alternative Syntax für den ternären Operator:

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

ist äquivalent zu:

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

Lean warum

Auch alternative Syntax mit display: 'none';

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

Wenn Sie jedoch zu viel verwenden display: 'none', führt dies zu einer DOM-Verschmutzung und verlangsamt letztendlich Ihre Anwendung.

Hier ist mein Ansatz.

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>
  );
}

Um dies zu erreichen, verwende ich im obigen Code folgenden Code:

{opened && <SomeElement />}

Das wird SomeElementnur gerendert , wenn openedes wahr ist. Es funktioniert aufgrund der Art und Weise, wie JavaScript logische Bedingungen auflöst:

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

Gründe für die Verwendung dieses Ansatzes anstelle von CSS 'Anzeige: keine';

• Während es möglicherweise "billiger" ist, ein Element mit CSS auszublenden, ist in diesem Fall das "versteckte" Element in der Reaktionswelt noch "lebendig" (was es möglicherweise viel teurer macht).
  • Dies bedeutet, dass <TabView>alle 5 Registerkarten neu gerendert werden , wenn sich die Requisiten des übergeordneten Elements (z. B. ) ändern - selbst wenn Sie nur eine Registerkarte sehen
  • Auf dem versteckten Element werden möglicherweise noch einige Lebenszyklusmethoden ausgeführt - z. Möglicherweise werden nach jedem Update einige Daten vom Server abgerufen, obwohl sie nicht sichtbar sind
  • Das versteckte Element kann die App zum Absturz bringen, wenn falsche Daten empfangen werden. Dies kann passieren, wenn Sie beim Aktualisieren des Status unsichtbare Knoten "vergessen" können
  • Sie könnten versehentlich einen falschen Anzeigestil einstellen, wenn Sie ein Element sichtbar machen - z. Einige Divs sind standardmäßig 'display: flex', aber Sie setzen versehentlich 'display: block', display: invisible ? 'block' : 'none'wodurch das Layout möglicherweise beschädigt wird
  • Die Verwendung someBoolean && <SomeNode />ist sehr einfach zu verstehen und zu begründen, insbesondere wenn Ihre Logik in Bezug auf die Anzeige von etwas oder nicht komplex wird
  • In vielen Fällen möchten Sie den Elementstatus zurücksetzen, wenn er erneut angezeigt wird. z.B. Möglicherweise haben Sie einen Schieberegler, den Sie bei jeder Anzeige auf die Ausgangsposition setzen möchten. (Wenn dies das gewünschte Verhalten ist, um den vorherigen Elementstatus beizubehalten, auch wenn es ausgeblendet ist, was IMO selten ist - ich würde in der Tat die Verwendung von CSS in Betracht ziehen, wenn es kompliziert wäre, sich diesen Status auf eine andere Weise zu merken.)

Mit der neuesten Version von React 0.11 können Sie auch einfach null zurückgeben, damit kein Inhalt gerendert wird.

Auf Null rendern

Ich habe eine kleine Komponente erstellt, die dies für Sie erledigt: React-Toggle-Display

Es setzt das Stilattribut display: none !importantbasierend auf den Requisiten hideoder show.

Anwendungsbeispiel:

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);

Es gibt bereits einige großartige Antworten, aber ich denke nicht, dass sie sehr gut erklärt wurden, und einige der angegebenen Methoden enthalten einige Fallstricke, die die Leute stören könnten. Ich werde also die drei Hauptwege (plus eine Option außerhalb des Themas) durchgehen, um dies zu tun und die Vor- und Nachteile zu erklären. Ich schreibe dies hauptsächlich, weil Option 1 sehr empfohlen wurde und es viele potenzielle Probleme mit dieser Option gibt, wenn sie nicht richtig verwendet wird.

Option 1: Bedingtes Rendern im übergeordneten Element.

Diese Methode gefällt mir nur, wenn Sie die Komponente nur einmal rendern und dort belassen. Das Problem ist, dass jedes Mal, wenn Sie die Sichtbarkeit umschalten, die Komponente von Grund auf neu erstellt wird. Hier ist das Beispiel. LogoutButton oder LoginButton werden im übergeordneten LoginControl bedingt gerendert. Wenn Sie dies ausführen, werden Sie feststellen, dass der Konstruktor bei jedem Klick auf die Schaltfläche aufgerufen wird. 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')
);

Jetzt ist React ziemlich schnell darin, Komponenten von Grund auf neu zu erstellen. Es muss jedoch immer noch Ihren Code aufrufen, wenn Sie ihn erstellen. Wenn Ihr Konstruktor-, componentDidMount-, Rendering- usw. Code also teuer ist, wird die Anzeige der Komponente erheblich verlangsamt. Dies bedeutet auch, dass Sie dies nicht für statusbehaftete Komponenten verwenden können, bei denen der Status beim Ausblenden beibehalten (und beim Anzeigen wiederhergestellt) werden soll. Der einzige Vorteil besteht darin, dass die ausgeblendete Komponente erst erstellt wird, wenn sie ausgewählt ist. Versteckte Komponenten verzögern also nicht das anfängliche Laden der Seite. Es kann auch Fälle geben, in denen Sie möchten, dass eine Stateful-Komponente beim Umschalten zurückgesetzt wird. In diesem Fall ist dies die beste Option.

Option 2: Bedingtes Rendern im Kind

Dadurch werden beide Komponenten einmal erstellt. Schließen Sie dann den Rest des Rendercodes kurz, wenn die Komponente ausgeblendet ist. Sie können auch andere Logik in anderen Methoden mit der sichtbaren Stütze kurzschließen. Beachten Sie das console.log auf der Codepen-Seite. 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')
);

Wenn die Initialisierungslogik schnell ist und die untergeordneten Elemente zustandslos sind, werden Sie keinen Unterschied in der Leistung oder Funktionalität feststellen. Warum sollte React jedoch bei jedem Umschalten eine brandneue Komponente erstellen? Wenn die Initialisierung jedoch teuer ist, wird sie bei Option 1 jedes Mal ausgeführt, wenn Sie eine Komponente umschalten, die die Seite beim Wechseln verlangsamt. Option 2 führt alle Inits der Komponente beim Laden der ersten Seite aus. Die erste Ladung verlangsamen. Sollte nochmal notieren. Wenn Sie die Komponente nur einmal basierend auf einer Bedingung anzeigen und nicht umschalten oder möchten, dass sie beim Umschalten zurückgesetzt wird, ist Option 1 in Ordnung und wahrscheinlich die beste Option.

Wenn das langsame Laden von Seiten jedoch ein Problem darstellt, bedeutet dies, dass Sie in einer Lebenszyklusmethode teuren Code haben, und das ist im Allgemeinen keine gute Idee. Sie können und sollten wahrscheinlich das langsame Laden von Seiten lösen, indem Sie den teuren Code aus den Lebenszyklusmethoden entfernen. Verschieben Sie es in eine asynchrone Funktion, die von ComponentDidMount gestartet wurde, und lassen Sie den Rückruf es mit setState () in eine Statusvariable setzen. Wenn die Statusvariable null ist und die Komponente sichtbar ist, muss die Renderfunktion einen Platzhalter zurückgeben. Andernfalls rendern Sie die Daten. Auf diese Weise wird die Seite schnell geladen und die Registerkarten werden beim Laden gefüllt. Sie können die Logik auch in das übergeordnete Element verschieben und die Ergebnisse als Requisiten an die untergeordneten Elemente senden. Auf diese Weise können Sie priorisieren, welche Registerkarten zuerst geladen werden. Oder speichern Sie die Ergebnisse im Cache und führen Sie die Logik nur aus, wenn eine Komponente zum ersten Mal angezeigt wird.

Option 3: Klassenverstecken

Das Verstecken von Klassen ist wahrscheinlich am einfachsten zu implementieren. Wie bereits erwähnt, erstellen Sie einfach eine CSS-Klasse mit display: none und weisen die Klasse basierend auf prop zu. Der Nachteil ist, dass der gesamte Code jeder versteckten Komponente aufgerufen wird und alle versteckten Komponenten an das DOM angehängt werden. (Option 1 erstellt die ausgeblendeten Komponenten überhaupt nicht. Und Option 2 schließt unnötigen Code kurz, wenn die Komponente ausgeblendet ist, und entfernt die Komponente vollständig aus dem DOM.) Es scheint, dass dies beim Umschalten der Sichtbarkeit nach einigen von Kommentatoren durchgeführten Tests schneller ist andere Antworten, aber ich kann nicht mit ihnen sprechen.

Option 4: Eine Komponente, aber Requisiten ändern. Oder vielleicht überhaupt keine Komponente und HTML zwischenspeichern.

Dieser funktioniert nicht für jede Anwendung und ist kein Thema, da es nicht darum geht, Komponenten auszublenden, aber für einige Anwendungsfälle ist er möglicherweise eine bessere Lösung als das Ausblenden. Angenommen, Sie haben Registerkarten. Möglicherweise können Sie eine Reaktionskomponente schreiben und mit den Requisiten ändern, was auf der Registerkarte angezeigt wird. Sie können JSX auch in Statusvariablen speichern und mithilfe einer Requisite entscheiden, welche JSX in der Renderfunktion zurückgegeben werden soll. Wenn die JSX generiert werden muss, tun Sie dies und zwischenspeichern Sie sie im übergeordneten Element und senden Sie die richtige als Requisite. Oder generieren Sie im Kind und zwischenspeichern Sie es im Zustand des Kindes und verwenden Sie Requisiten, um das aktive auszuwählen.

Dies ist eine gute Möglichkeit, das virtuelle DOM zu nutzen :

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>
     );
  }
}

Beispiel hier

React Hooks verwenden:

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>
  )
}

Beispiel hier

Sie setzen einen booleschen Wert im Status (z. B. 'show)' und führen dann Folgendes aus:

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

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

Best Practice finden Sie unten in der Dokumentation:

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

Rendern Sie das Element nur, wenn der Status gültig ist.

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>
     );
  }
}

   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>
        );
      }
  }

Ich beginne mit dieser Aussage des React-Teams:

In React können Sie verschiedene Komponenten erstellen, die das von Ihnen benötigte Verhalten kapseln. Anschließend können Sie je nach Status Ihrer Anwendung nur einige davon rendern.

Das bedingte Rendern in React funktioniert genauso wie die Bedingungen in JavaScript. Verwenden Sie JavaScript-Operatoren wie if oder den bedingten Operator, um Elemente zu erstellen, die den aktuellen Status darstellen, und lassen Sie React die Benutzeroberfläche entsprechend aktualisieren.

Grundsätzlich müssen Sie die Komponente anzeigen, wenn auf die Schaltfläche geklickt wird. Sie können dies auf zwei Arten tun: mit reinem React oder mit CSS. Mit reinem React-Weg können Sie in Ihrem Fall so etwas wie den folgenden Code ausführen, sodass im ersten Durchgang Ergebnisse erzielt werden werden nicht so angezeigt, wie sie hideResultssind true, aber durch Klicken auf die Schaltfläche ändert sich der Status und hideResultswird falseund die Komponente wird erneut mit den neuen Wertebedingungen gerendert. Dies ist eine sehr häufige Verwendung der Änderung der Komponentenansicht in 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);

Wenn Sie weitere Studien zum bedingten Rendern in React durchführen möchten, klicken Sie hier .

Einfaches Ein- / Ausblenden-Beispiel mit React Hooks: (srry about no fiddle)

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;

Wenn Sie sehen möchten, wie Sie die Anzeige einer Komponente umschalten können, überprüfen Sie diese Geige.

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'));

Eine einfache Methode zum Ein- und Ausblenden von Elementen in React using Hooks

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

Fügen wir nun unserer Rendermethode eine Logik hinzu:

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

Und

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

Gut gemacht.

In einigen Fällen kann eine Komponente höherer Ordnung nützlich sein:

Komponente höherer Ordnung erstellen:

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

Erweitern Sie Ihre eigene Komponente:

export const MyComp= HidableComponent(MyCompBasic);

Dann können Sie es so verwenden:

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

Dies reduziert ein wenig das Boilerplate und erzwingt das Festhalten an Namenskonventionen. Beachten Sie jedoch, dass MyComp weiterhin instanziiert wird - der Weg zum Weglassen wurde bereits erwähnt:

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

Verwenden Sie das Modul rc-if-else

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>
        );
    }
}

Verwenden Sie ref und manipulieren Sie CSS

Eine Möglichkeit könnte darin bestehen, die React- refKlasse zu verwenden und die CSS-Klasse mithilfe der Browser-API zu bearbeiten. Der Vorteil besteht darin, ein erneutes Rendern in React zu vermeiden, wenn der einzige Zweck darin besteht, ein DOM-Element auf Knopfdruck auszublenden / anzuzeigen.

// 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 Korrigieren Sie mich, wenn ich falsch liege. :) :)

Wenn Sie Bootstrap 4 verwenden, können Sie das Element auf diese Weise ausblenden

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

Dies kann auch so erreicht werden (sehr einfacher Weg)

 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
  }
   );
     }

Dieses Beispiel zeigt, wie Sie zwischen Komponenten wechseln können, indem Sie einen Schalter verwenden, der alle 1 Sekunde wechselt

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);

Verwenden Sie diese schlanke und kurze Syntax:

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

Hier kommt die einfache, effektive und beste Lösung mit einer klassenlosen Reaktionskomponente zum Ein- und Ausblenden der Elemente. Verwendung von React-Hooks, die im neuesten Projekt zum Erstellen und Reagieren von Apps verfügbar sind , das React 16 verwendet

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;

Viel Spaß beim Codieren :)

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

Sie können die CSS-Datei verwenden

    var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className={`search-results ${this.state.showResults ? 'show' : ''}`}>
                Some Results
            </div>
        );
    }
})

und in der CSS-Datei

    .search-results {
     ...
     display: none
     &.show {
      display: block
   }
}

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);

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>
    );
  }
}