Wie implementiert man bedingtes Rendering in ReactJS JSX?

Verwenden von if-else-Anweisungen in ReactJS JSX

In ReactJS können if-else-Anweisungen nicht direkt in JSX verwendet werden. Dies liegt daran, dass JSX in JavaScript-Funktionsaufrufe umgewandelt wird und if-else-Anweisungen nicht mit dieser Syntax kompatibel sind.

Bedingtes Rendern mit ternärem Operator

Ein Ansatz für bedingtes Rendern ist die Verwendung des ternären Operators:

render() {
    return (
        <View>

In diesem Beispiel, wenn der Wert der Staatseigenschaft gleich ist 'news', das Textelement mit dem Inhalt 'data' wird gerendert. Andernfalls wird null gerendert, wodurch das Element effektiv ausgeblendet wird.

Funktionsbasiertes bedingtes Rendering

Eine andere Möglichkeit besteht darin, eine Funktion zur Handhabung des bedingten Renderings zu erstellen und diese aufzurufen von JSX:

renderElement() {
    if (this.state.value == 'news') {
        return data;
    }
    return null;
}

render() {
    return (
        <View>

In diesem Fall prüft die Funktion renderElement() den Wertstatus und gibt entweder das Textelement oder null zurück. Der JSX ruft dann die Funktion renderElement() auf, um das gewünschte Element bedingt zu rendern.

Das obige ist der detaillierte Inhalt vonWie implementiert man bedingtes Rendering in ReactJS JSX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!