Quel est l'équivalent de ng-si dans react.js?

Question

Je viens de réagir à l'aide angulaire et je suis à essayer de comprendre une bonne réagir alternative angulaire de la ng-si la directive où je rendre ou ne pas rendre un élément en fonction d'une condition. Prenez ce code par exemple. Je suis l'aide de la machine (tsx) btw, mais qui ne devrait pas beaucoup d'importance.

"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;

Cette solution fonctionne, mais est-il une autre façon qui est généralement utilisé pour obtenir cet effet? Je suis juste une sorte de deviner

Answer 1

Que diriez - opérateur ternaire?

render() {
  return (
    this.props.showMe ? <button type="submit" className="btn nav-btn-red">SIGN UP</button> : null
  );
}

Answer 2

Je laisse ce à des fins historiques, veuillez voir mes modifications ci-dessous pour une bien meilleure solution après avoir mis au point à réagir pendant un certain temps J'ai fini par créer un NgIf composant (c'est réagir indigènes, mais fonctionne probablement pour réagir)

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;

Utilisation:

...
import NgIf from "./path/to/component"
...

class MyClass {
   render(){
      <NgIf show={this.props.show}><Text>This Gets Displayed</Text></NgIf>
   }
}

Im nouveau à cela, donc peut probablement être améliorée, mais qui m'aide dans ma transition Angulaires

MODIFIER

Voir les modifications ci-dessous pour une explication mieux une fois que j'ai eu plus d'expérience

Grâce à Jay de Commentaire ci-dessous, une grande idée est aussi:

render() {
   <View>{this.props.value ? <Text>Yes</Text> : <Text>No</Text>}</View>
}

OU

render() {
   <View>{this.props.value && <Text>Yes</Text>}</View>
}

À l'instar de certaines autres réponses, mais des œuvres en ligne, au lieu de l'aide de l'ensemble de la rendre bloc / fonction, n'a pas besoin d'un composant spécial, et vous pouvez utiliser une instruction else avec l'opérateur ternaire. En Plus des éléments contenus dans la déclaration de ne pas lever une erreur si leur objet parent n'existe pas. C'est à dire si si props.value n'existe pas, alors props.value.value2 ne va pas faire une erreur.

Voir cette réponse https://stackoverflow.com/a/26152067

EDIT 2:

Comme par le lien ci-dessus (https://stackoverflow.com/a/26152067) et après beaucoup plus d'expérience dans le développement de réagir applications, de la façon décrite ci-dessus c'est pas la meilleure façon de faire les choses.

Les opérateurs conditionnels à réagir sont en fait très facile à obtenir autour de votre tête. Il y a deux façons de faire les choses:

//Show if someItem
{someItem && displayThis}

//Show if else
{someItem ? displayThisIfTrue : displayThisIfFalse}

Une mise en garde, vous pourriez frapper est si "someItem" n'est pas une expression booléenne. Si elle est à dire 0 réagir permettra d'imprimer un 0 ou réagir natif vous donnera une erreur sur la nécessité de wrap "0" dans un élément de texte. Ce n'est généralement pas un problème pour falsy tests, mais présentera un problème pour truthy tests. Par exemple:

{!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

Mon souvent utilisé truc? la double négation.

{!!someItem && displayThis}

Notez que ceci ne s'applique pas aux opérateurs ternaires (myVar ? true : false) depuis implicitement convertit le résultat en une expression booléenne.

Answer 3

Si vous avez d'autres éléments que vous pouvez envelopper juste le conditionnel comme suit:

render() {
  return (
    <div>Stuff</div>
    {this.props.showMe && (
      <button type="submit" className="btn nav-btn-red">SIGN UP</button>
    )}
    <div>More stuff</div>
  );
}

Answer 4

Un peu plus agréable:

render() {
  return (
    this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
  );
}

Answer 5

Je ne peux penser à au moins trois façons de simuler ng-si la fonctionnalité de Réagir

• si
• commutateur
• IIFE (immédiatement invoquées par l'expression de fonction)

Vous pouvez lire le post ici: Angulaire de la ng-si l'Équivalent Dans une Réagir la Composante

Fondamentalement, vous voulez faire quelque chose comme ceci:

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;
  }
});