Ich werde mit der Verwendung von Angular reagieren und versuche, eine gute Reaktionsalternative zur ng-if-Direktive von Angular zu finden, bei der ich ein Element basierend auf einer Bedingung rendere oder nicht rendere. Nehmen Sie zum Beispiel diesen Code. Ich benutze übrigens Typoskript (tsx), aber das sollte nicht viel ausmachen.
"use strict";
import * as React from 'react';
interface MyProps {showMe: Boolean}
interface MyState {}
class Button extends React.Component <MyProps, MyState>{
constructor(props){
super(props);
this.state = {};
}
render(){
let button;
if (this.props.showMe === true){
button = (
<button type="submit" className="btn nav-btn-red">SIGN UP</button>
)
} else {
button = null;
}
return button;
}
}
export default Button;
Diese Lösung funktioniert, aber gibt es einen anderen Weg, der im Allgemeinen verwendet wird, um diesen Effekt zu erzielen? Ich rate nur
''
wenn keine Elemente gerendert werden sollen.Antworten:
Wie wäre es mit einem ternären Operator ?
render() { return ( this.props.showMe ? <button type="submit" className="btn nav-btn-red">SIGN UP</button> : null ); }
Sie können auch verwenden
&&
:render() { return ( this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button> ); }
Ein großer Block wie im Kommentar kann einfach behandelt werden, indem die JSX in
()
s eingeschlossen wird:render() { return this.props.showMe && ( <div className="container"> <button type="submit" className="btn nav-btn-red"> SIGN UP </button> </div> ); }
Auch inline:
render() { return ( <div className="container"> {this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>} </div> ); }
quelle
Ich lasse dies aus historischen Gründen hier. Eine viel bessere Lösung finden Sie in meinen Änderungen unten, nachdem
icheine Weile in Reaktion entwickelt habe.Am Ende habe ich eine NgIf-Komponente erstellt (dies ist reaktionsnativ, funktioniert aber wahrscheinlich für Reaktion).Code:
import React, {Component} from "react"; class NgIf extends Component { render() { if (this.props.show) { return ( this.props.children ); } else { return null } } } export default NgIf;
Verwendung:
... import NgIf from "./path/to/component" ... class MyClass { render(){ <NgIf show={this.props.show}><Text>This Gets Displayed</Text></NgIf> } }
Ich bin neu in diesem Bereich, kann also wahrscheinlich verbessert werden, hilft mir aber bei meinem Übergang von AngularBEARBEITEN
Weitere Informationen finden Sie in den Änderungen unten, sobald ich mehr Erfahrung habe
Dank Jays Kommentar unten ist eine großartige Idee auch:
render() { <View>{this.props.value ? <Text>Yes</Text> : <Text>No</Text>}</View> }
ODER
render() { <View>{this.props.value && <Text>Yes</Text>}</View> }
Ähnlich wie bei einigen anderen Antworten, funktioniert jedoch inline, anstatt den gesamten Renderblock / die gesamte Renderfunktion zu verwenden, ist keine spezielle Komponente erforderlich, und Sie können eine else-Anweisung mit dem ternären Operator verwenden. Plus-Elemente in der if-Anweisung geben keinen Fehler aus, wenn das übergeordnete Objekt nicht vorhanden ist. Dh wenn wenn
props.value
nicht existiert, dannprops.value.value2
wird kein Fehler ausgegeben.Siehe diese Antwort https://stackoverflow.com/a/26152067EDIT 2:
Gemäß dem obigen Link ( https://stackoverflow.com/a/26152067 ) und nach viel mehr Erfahrung bei der Entwicklung von Reaktions-Apps ist dies nicht der beste Weg, um Dinge zu tun.
Bedingte Operatoren, die reagieren, sind tatsächlich sehr einfach, sich zurechtzufinden. Es gibt zwei Möglichkeiten, Dinge zu tun:
//Show if someItem {someItem && displayThis} //Show if else {someItem ? displayThisIfTrue : displayThisIfFalse}
Eine Einschränkung, die Sie möglicherweise treffen, ist, wenn "someItem" kein boolescher Ausdruck ist. Wenn Sie sagen, dass 0 "Reagieren" eine 0 druckt oder "Native reagieren", wird eine Fehlermeldung angezeigt, dass "0" in ein Textelement eingeschlossen werden muss. Dies ist normalerweise kein Problem für falsche Tests, stellt jedoch ein Problem für wahrheitsgemäße Tests dar. Zum Beispiel:
{!someItem && displayThis} //Will work just fine if item is 0 or null or "" etc {someItem && displayThis} //Will print the value of someItem if its not falsy
Mein oft benutzter Trick? Doppel-Negative.
Beachten Sie, dass dies nicht für ternäre Operatoren (myVar? True: false) gilt, da das Ergebnis implizit in einen booleschen Ausdruck konvertiert wird.
quelle
Wenn Sie auch andere Elemente haben, können Sie nur die Bedingung wie folgt umbrechen:
render() { return ( <div>Stuff</div> {this.props.showMe && ( <button type="submit" className="btn nav-btn-red">SIGN UP</button> )} <div>More stuff</div> ); }
quelle
Ein bisschen schöner:
render() { return ( this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button> ); }
quelle
Ich wollte nur hinzufügen, dass
*ngIf
in eckig nicht die Komponente instanziiert wird, an die es angehängt ist. Wenn Sie in React eine if-Anweisung innerhalb derreturn
Anweisung verwenden, wird die Komponente trotzdem instanziiert, obwohl sie nicht angezeigt wird. Um*ngIf
in React ein echtes Typverhalten zu erzielen , müssen Sie eine Variable erstellen, die die bedingte Komponente außerhalb derreturn
Anweisung enthält:render() { const show = false return show ? <AwesomeComponent /> //still instantiated : null } render() { let c = null const show = false if (show) { c = <AwesomeComponent /> //not instantiated } return c }
quelle
Ich kann mir mindestens drei verschiedene Möglichkeiten vorstellen, um die ng-if-Funktionalität in React zu simulieren
Sie können den Beitrag hier lesen: Angulars ng-if-Äquivalent in einer Reaktionskomponente
Grundsätzlich möchten Sie so etwas tun:
var IfDemoComponent = React.createClass({ render: function() { var el = null; if (this.props.showMe) { el = ( <div> I am only included in the DOM if this.props.showMe evaluates to true. </div> ); } return el; } });
quelle
Sie können dies also versuchen
const conditional=({condition,someArray})=>{ return( <div> {condition && <Header /> // condition being boolean} {someArray.length>0 && <Content />} </div> ) }
Dies kann nützlich sein, um React-Elemente bedingt zu rendern. Diese JSX rendert nur eine if-Bedingung und wird nur gerendert, wenn someArray.length> 0 ist
quelle
Ich mag es nicht, viele ternäre Operatoren im Code zu haben. Deshalb habe ich eine Bibliothek mit einigen nützlichen Komponenten erstellt. "RcIf"
<RcIf if={condition} > <h1>I no longer miss ngif</h1> </RcIf> <RcIf if={othercondition} > <h1>I no longer miss v-if</h1> <RcElse> <h1>I love react</h1> </RcElse> </RcIf>
Sie können es von npm installieren
https://www.npmjs.com/package/rc-if
quelle
Ich bin der Schöpfer von Tersus-jsx.macro und ich denke, dieses Modul bietet genau das, was für diese Frage benötigt wird.
Anstatt JSX-Ausdrücke und ES6 zu mischen, um ng-if oder ng-repeat zu erreichen, können Sie mit diesem Makro die gleichen Schritte wie in AngularJS für React JSX ausführen, z. B. für ng-if:
<div> <button tj-if={a === 0} id="gotoA" className="link" onClick={clicking} /> </div>
das ist äquivalent zu
<div> {(a === 0) && ( <button id="gotoA" className="link" onClick={clicking} /> )} </div>
Angesichts der Tatsache, dass die neueste Version von create-react-app Babel-Macro sofort unterstützt, müssen Sie dieses Modul nur mit npm installieren, die Render-Rückgabe mit "tersus" umschließen und mit der Zuweisung dieser Requisiten beginnen.
Sie können dies unter folgender Adresse installieren: https://www.npmjs.com/package/tersus-jsx.macro
quelle
Ich komme ebenfalls aus einem eckigen Hintergrund und suchte nach einem einfachen Einzeiler, um das Tag anzuzeigen, wenn die Variable Elemente enthält. Das hat bei mir funktioniert:
<div className="comic_creators"> {c.creators.available > 0 ? <h4>Creators</h4> : null } {c.creators.items.map((creator,key) => <Creator creator={creator} key={key}></Creator> )} </div>
quelle
Ich erstelle nur eine Methode, um Ausdruck und zwei weitere Argumente als Vorlage zu verwenden, falls der Ausdruck wahr und das andere eine Option für eine andere Vorlage ist
export function rif(exp, template, elseTemplate = null) { if (exp) { return template; } else { return elseTemplate; } }
und ich benutze es so
import { rif } from '../utilities'; ... render() { return ( <main role="main" className="container"> {rif( this.movies.length > 0, <p>Showing {this.movies.length} movies. </p>, <p>There are no movies..</p> )} </main> ); }
quelle
Persönlich benutze ich gerne Getter, es ist sauber und gewährleistet Reaktivität:
get toBeDisplayed(){ const { someLogicState } = this.state; if(someLogicState) return ( <div> Hi, world ! </div> ); else return null; } render(){ return (<div>{this.toBeDisplayed}</div>); }
quelle
Ich arbeite sowohl eckig als auch reagiere. Ich denke
angular
, logische Bedingungen durch verschiedene Anweisungen gut zu verwalten.Im
reactjs
diesem Ansatz arbeiten Sie anders.Sie können verwenden
if else
Zustand alsreturn
derrender function
oderternary operator
.render(){ const auth = true; if(!auth) return( <div className="ps-checkout__login"> <div className="d-flex flex-row"> <div className="p-2"><img src="../../../static/img/return-customer.png"></img> Returning Customer?</div> <div className="p-2"> <Link href="/account/login"> <a> Click here to login </a> </Link> </div> </div> </div> ) else return null; }
{ auth? (<div className="ps-checkout__login"> <div className="d-flex flex-row"> <div className="p-2"><img src="../../../static/img/return-customer.png"></img> Returning Customer?</div> <div className="p-2"> <Link href="/account/login"> <a> Click here to login </a> </Link> </div> </div> </div>):null }
quelle