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

Die bewährte Methode gemäß der Dokumentation ist unten aufgeführt:

{this.state.showFooter && 

Renden Sie das Element nur, wenn der Zustand gültig ist.

Answer 2

Einfaches Beispiel für das Ausblenden/Anzeigen mit React Hooks: (Entschuldigung, kein Fiddle)

const Beispiel = () => {

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

  return (

      Anzeige-Status: {show}
      {show ? (
        Du kannst mich sehen!
      ) : null}
       setShow(!show)}>

  );

};

export default Beispiel;

Answer 3

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

  render() {
    const {show} = this.state;
    return (

         this.setState({show: !show })}>
          umschalten: {show ? 'anzeigen' : 'verbergen'}

        {show && Hallo}

     );
  }
}

Answer 4

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

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

      render(){
        return(

                        Einige Ergebnisse

        );
      }
  }

Answer 5

Ich beginne mit dieser Aussage des React-Teams:

In React können Sie unterschiedliche Komponenten erstellen, die das Verhalten umschließen, das Sie benötigen. Anschließend können Sie je nach Zustand Ihrer Anwendung nur einige von ihnen rendern.

Bedingte Darstellung in React funktioniert genauso wie Bedingungen in JavaScript. Verwenden Sie JavaScript-Operatoren wie if oder den bedingten Operator, um Elemente zu erstellen, die den aktuellen Zustand repräsentieren, und lassen Sie React das UI aktualisieren, um sie anzupassen.

Im Grunde genommen müssen Sie die Komponente anzeigen, wenn die Schaltfläche geklickt wird. Sie können es auf zwei Arten tun, entweder rein mit React oder mit CSS. Auf reine React-Weise können Sie etwas ähnliches wie den folgenden Code in Ihrem Fall tun. Also, beim ersten Start werden die Ergebnisse nicht angezeigt, da hideResults true ist. Aber durch Klicken auf die Schaltfläche wird der Zustand geändert und hideResults wird zu false und die Komponente wird erneut mit den neuen Wertbedingungen gerendert. Dies ist eine sehr häufige Anwendung zur Änderung der Komponentenansicht in React...

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

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

  render: function() {
    return (

        { !this.state.hideResults &&  }
       );
  }

});

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

      Some Results
    );
   }
});

ReactDOM.render(, document.body);

Wenn Sie weitere Untersuchungen zur bedingten Darstellung in React durchführen möchten, schauen Sie sich hier an.