Wie schalte ich die Elementsichtbarkeit in React um?

Element in React anzeigen oder ausblenden

In einer React-Anwendung müssen Sie häufig Elemente basierend auf ein- oder ausblenden auf Benutzerinteraktion. Lassen Sie uns untersuchen, wie Sie dies mithilfe der nativen React-Funktionalität erreichen können.

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

});

var Results = React.createClass({

render: function () {
    return (
        <div id=&quot;results&quot; className=&quot;search-results&quot;>
            Some Results
        </div>
    );
}

});

React.renderComponent(

, document.body);

In diesem Beispiel:

• Suchkomponente rendert eine Schaltfläche, die die handleClick-Methode auslöst.
• Die Ergebniskomponente stellt das Element dar, das wir umschalten möchten.

Elementstatus umschalten

Um die Elementsichtbarkeit umzuschalten, müssen wir beibehalten Zustand. In modernen Versionen von React können wir den useState-Hook verwenden, um den Komponentenstatus zu verwalten:

const Search = () =&gt ; {<br> const [showResults, setShowResults] = useState(false)<br> const handleClick = () => setShowResults(true)<br> return (</p>
<pre class="brush:php;toolbar:false"><div>
  <input type="submit" value="Search" onClick={handleClick} />
  { showResults ? <Results /> : null }
</div>

)
}

const Results = () => (

Some Results

)

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

Hier:

• useState initialisiert eine Zustandsvariable (showResults) mit einem Anfangswert (false).
• setShowResults ist eine Funktion, die den showResults-Status aktualisiert und ein erneutes Rendern auslöst.
• Wenn auf die Schaltfläche geklickt wird, setzt handleClick showResults auf true, wodurch die Ergebniskomponente gerendert wird.

Dieser Ansatz bietet eine native und effiziente Möglichkeit, Elemente in React-Anwendungen anzuzeigen oder auszublenden.

Das obige ist der detaillierte Inhalt vonWie schalte ich die Elementsichtbarkeit in React um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!