Element in React anzeigen oder ausblenden

Question

Ich spiele zum ersten Mal mit React.js herum und kann keinen Weg finden, um etwas auf einer Seite über ein Klick-Ereignis zu zeigen oder zu verbergen. Ich lade keine andere Bibliothek auf die Seite, daher suche ich nach einer nativen Möglichkeit, die React-Bibliothek zu nutzen. Das ist der aktuelle Stand. Ich möchte das Ergebnis-Div anzeigen, wenn das Klick-Ereignis ausgelöst wird.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (

        );
    }
});

var Results = React.createClass({
    render: function () {
        return (

                Einige Ergebnisse

        );
    }
});

React.renderComponent( , document.body);

Answer 1

React circa 2020

In dem onClick Rückruf, rufen Sie die Setzerfunktion des state hook's auf, um den Zustand zu aktualisieren und neu zu rendern:

const Suche = () => {
  const [zeigeErgebnisse, setzeZeigeErgebnisse] = React.useState(false)
  const onClick = () => setzeZeigeErgebnisse(true)
  return (

      { zeigeErgebnisse ?  : null }

  )
}

const Ergebnisse = () => (

    Einige Ergebnisse

)

ReactDOM.render(, document.querySelector("#container"))

JSFiddle

React circa 2014

Der Schlüssel ist, den Zustand des Komponenten im Klick-Handler mit setState zu aktualisieren. Wenn die Zustandsänderungen angewendet werden, wird die Methode render erneut mit dem neuen Zustand aufgerufen:

var Suche = React.createClass({
    getInitialState: function() {
        return { zeigeErgebnisse: false };
    },
    onClick: function() {
        this.setState({ zeigeErgebnisse: true });
    },
    render: function() {
        return (

                { this.state.zeigeErgebnisse ?  : null }

        );
    }
});

var Ergebnisse = React.createClass({
    render: function() {
        return (

                Einige Ergebnisse

        );
    }
});

ReactDOM.render(  , document.getElementById('container'));

JSFiddle

Answer 2

    .hidden { display:none; }

const Example = props => 
  Hello

Answer 3

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

{ this.state.showMyComponent ?  : null }

ist äquivalent zu:

{ this.state.showMyComponent &&  }

Erfahren Sie warum

---

Auch alternative Syntax mit display: 'none';

Allerdings führt übermäßiger Gebrauch von display: 'none' zu DOM-Verschmutzung und verlangsamt letztendlich Ihre Anwendung.

Answer 4

Hier ist mein Ansatz.

import React, { useState } from 'react';

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

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

  return (

        {title}

      {isOpened && (

          {children}

      )}

  );
}

Im obigen Code benutze ich beispielsweise:

{geöffnet && }

Dadurch wird SomeElement nur gerendert, wenn geöffnet wahr ist. Das funktioniert aufgrund der Art und Weise, wie JavaScript logische Bedingungen auflöst:

true && true && 2; // gibt 2 aus
true && false && 2; // gibt false aus
true && 'some string'; // gibt 'some string' aus
geöffnet && ; // gibt SomeElement aus, wenn `geöffnet` wahr ist, gibt andernfalls false aus (und false wird von React während des Renderings ignoriert)
// Vorsicht mit 'falsy'-Werten z.B.
const someValue = [];
someValue.length &&  // gibt 0 aus, was von React gerendert wird
// es wäre besser zu:
someValue.length > 0 &&  // wird nichts rendern, da wir den Wert auf boolean konvertieren

Gründe für die Verwendung dieses Ansatzes anstelle von CSS 'display: none';

• Auch wenn es 'billiger' sein könnte, ein Element mit CSS zu verstecken - in diesem Fall ist das 'versteckte' Element immer noch im React-Universum 'aktiv' (was es tatsächlich viel teurer machen könnte)
  • Das bedeutet, dass wenn sich die Props des Elternelements ändern (z.B. ), selbst wenn Sie nur ein Register sehen, werden alle 5 Register neu gerendert
  • Das versteckte Element kann immer noch Lebenszyklusmethoden ausführen - z.B. es kann nach jedem Update Daten vom Server abrufen, auch wenn es nicht sichtbar ist
  • Das versteckte Element kann die App zum Absturz bringen, wenn es falsche Daten empfängt. Das könnte passieren, da man unsichtbare Knoten beim Aktualisieren des Zustands 'vergessen' kann
  • Man kann aus Versehen einen falschen 'display'-Stil setzen, wenn man ein Element sichtbar macht - z.B. ein div ist standardmäßig 'display: flex', aber man setzt aus Versehen 'display: block' mit display: invisible ? 'block' : 'none', was das Layout brechen könnte
  • Das Verwenden von someBoolean && ist sehr einfach zu verstehen und nachzuvollziehen, insbesondere wenn Ihre Logik im Zusammenhang mit dem Anzeigen oder Nicht-Anzeigen von etwas komplex wird
  • In vielen Fällen möchten Sie den Elementzustand 'zurücksetzen', wenn es wieder erscheint. z.B. Sie möchten einen Schieberegler auf die Ausgangsposition setzen, jedes Mal wenn er angezeigt wird. (wenn dieses gewünschte Verhalten ist, den vorherigen Elementzustand zu speichern, selbst wenn er versteckt ist, was meiner Meinung nach selten ist - würde ich wahrscheinlich CSS verwenden, wenn das Merken dieses Zustands auf andere Weise kompliziert wäre)

Answer 5

Mit der neuesten Version von React 0.11 können Sie auch einfach null zurückgeben, um keinen Inhalt gerendert zu haben.

Rendering zu null