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

Dies ist eine schöne Möglichkeit, den virtuellen DOM zu nutzen:

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

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

  render() {
    return (

          umschalten: {this.state.show ? 'anzeigen' : 'verbergen'}

        {this.state.show && Hallo hier}

     );
  }
}

Beispiel hier

Verwendung von React Hooks:

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

  return (

       toggleShow(!show)}
      >
        umschalten: {show ? 'anzeigen' : 'verbergen'}

      {show && Hallo hier}

  )
}

Beispiel hier

Answer 2

Ich habe ein kleines Komponent erstellt, das dies für Sie handhabt: react-toggle-display

Es setzt das Style-Attribut auf display: none !important basierend auf den props hide oder show.

Beispiel Verwendung:

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

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

        );
    }
});

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

                Some Results

        );
    }
});

React.renderComponent(, document.body);

Answer 3

Sie setzen einen booleschen Wert im Zustand (z. B. 'anzeigen') und dann tun Sie:

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

return ...

Answer 4

Eine einfache Methode, um Elemente in React mit Hooks anzuzeigen/zu verstecken

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

Jetzt fügen wir etwas Logik zu unserer Render-Methode hinzu:

{showText &&  Dieser Text wird angezeigt! }

Und

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

Gut gemacht.

Answer 5

Ich konnte die CSS-Eigenschaft "versteckt" verwenden. Ich kenne mögliche Nachteile nicht.

export default function App() {
    const [hidden, setHidden] = useState(false);
    return (

         setHidden(!hidden)}>VERSTECKEN
        versteckte Komponente

    );
  }