react.jsのng-ifに相当するものは何ですか？

Question 1

私はangularを使用して反応するようになり、条件に基づいて要素をレンダリングする、またはレンダリングしない、angularのng-ifディレクティブに代わる適切な反応を見つけようとしています。このコードを例にとってみましょう。私はtypescript（tsx）を使用していますが、それはそれほど重要ではありません。

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

このソリューションは機能しますが、この効果を達成するために一般的に使用される別の方法はありますか？ちょっと推測しているだけです

Question 2

どの程度三項演算子？

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

また、使用することができます&&：

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

コメントのような大きなブロックは、JSXを()sでラップすることで簡単に処理できます。

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

またインライン：

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

Question 3

私はこれを歴史的な目的のためにここに残しています。しばらくの間reactで開発した後、はるかに優れたソリューションについては、以下の編集を参照してください ~~（これはreactネイティブですが、おそらくreactで機能します）~~

コード：

import React, {Component} from "react";

class NgIf extends Component {
  render() {
    if (this.props.show) {
      return (
        this.props.children
      );
    } else {
      return null
    }
  }
}

export default NgIf;

使用法：

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

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

~~私はこれに慣れていないので、おそらく改善することができますが、Angularからの移行に役立ちます~~

編集

私がより多くの経験を積んだ後のより良い説明については、以下の編集を参照してください

以下のジェイのコメントのおかげで、素晴らしいアイデアもあります：

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

または

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

他のいくつかの回答と同様ですが、レンダーブロック/関数全体を使用する代わりにインラインで機能し、特別なコンポーネントを必要とせず、三項演算子でelseステートメントを使用できます。さらに、ifステートメントに含まれるアイテムは、親オブジェクトが存在しない場合でもエラーをスローしません。つまり、props.value存在しない場合、props.value.value2エラーはスローされません。

~~この回答を参照してくださいhttps://stackoverflow.com/a/26152067~~

編集2：

上記のリンク（https://stackoverflow.com/a/26152067）のとおり、reactアプリの開発で多くの経験を積んだ後、上記の方法は最善の方法ではありません。

反応の条件付き演算子は、実際には非常に簡単に頭を動かすことができます。物事を行うには2つの方法があります。

//Show if someItem
{someItem && displayThis}

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

「someItem」がブール式でない場合に発生する可能性のある注意点の1つです。0が0の場合、reactは0を出力するか、react nativeは、テキスト要素で「0」をラップする必要があるというエラーを表示します。これは通常、偽のテストでは問題になりませんが、真実のテストでは問題になります。例えば：

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

私のよく使うトリック？二重否定。

{!!someItem && displayThis}

これは、結果をブール式に暗黙的に変換するため、三項演算子（myVar？true：false）には適用されないことに注意してください。

Question 4

他の要素もある場合は、次のように条件付きでラップできます。

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

Question 5

もう少しいい：

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

Question 6

*ngIf角度を付けても、接続されているコンポーネントはインスタンス化されないことを追加したかっただけです。Reactでは、ステートメント内でifステートメントを使用するreturnと、コンポーネントが表示されていなくても、コンポーネントがインスタンス化されます。*ngIfReactでTrueTypeの動作を実現するには、returnステートメントの外部で条件付きコンポーネントを保持する変数を作成する必要があります。

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
}

Question 7

Reactでng-if機能をシミュレートするための少なくとも3つの異なる方法を考えることができます

もし
スイッチ
IIFE（即時呼び出し関数式）

ここで投稿を読むことができます：Angularのng-Reactコンポーネントで同等の場合

基本的に、あなたはこのようなことをしたいです：

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

Question 8

false、null、undefined、およびtrue有効な子です。それらは単にレンダリングしません。これらのJSX式はすべて同じものにレンダリングされます。

だからあなたはこれを試すことができます

const conditional=({condition,someArray})=>{
     return(
        <div>
          {condition && <Header /> // condition being boolean} 
          {someArray.length>0 && <Content />}
        </div>
      )
}

これは、React要素を条件付きでレンダリングするのに役立ちます。このJSXは、条件がtrueの場合にのみレンダリングし、someArray.length> 0の場合にのみレンダリングします。

Question 9

コードに多くの三項演算子を含めるのは好きではありません。そのため、いくつかの便利なコンポーネントを使用してライブラリを作成しました。「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>

npmからインストールできます

https://www.npmjs.com/package/rc-if

Question 10

私はTersus-jsx.macroの作成者であり、このモジュールはこの質問に必要なものを正確に提供すると思います。

JSX式とES6を混合してng-ifまたはng-repeatを実現するのではなく、このマクロを使用すると、AngularJS for React JSXと同じ方法で、たとえばng-ifを実行できます。

<div>
  <button
    tj-if={a === 0}
    id="gotoA"
    className="link"
    onClick={clicking}
  />
</div>

これは

<div>
  {(a === 0) && (
    <button
      id="gotoA"
      className="link"
      onClick={clicking}
    />
  )}
</div>

create-react-appの最新バージョンがBabel-Macroをすぐにサポートすることを考えると、必要なのは、このモジュールをnpmでインストールし、レンダーリターンを「tersus」でラップして、それらの小道具の割り当てを開始することだけです。

これはhttps://www.npmjs.com/package/tersus-jsx.macroからインストールできます。

Question 11

私も角度のある背景から来ており、変数に要素が含まれている場合にタグを表示するための単純な1つのライナーを探していました。これは私のために働いた：

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

Question 12

式が真理でもう一方がオプションである場合に備えて、exprestionと2つの別の引数をテンプレートとして使用するメソッドを作成するだけです。

export function rif(exp, template, elseTemplate = null) {
    if (exp) {
        return template;
    } else {
        return elseTemplate;
    }
}

そして私はそれをこのように使います

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

Question 13

個人的に私はゲッターを使うのが好きです、それはきれいで、反応性を保証します：

get toBeDisplayed(){
  const { someLogicState } = this.state;
  if(someLogicState)
    return (
      <div>
        Hi, world !
      </div>
    );
  else
    return null;
}

render(){
  return (<div>{this.toBeDisplayed}</div>);
}

Question 14

私は角度と反応の両方で働いています。おもうangularさまざまなディレクティブを使用して論理条件を適切に管理できる。

に reactjs、このアプローチ異なるように動作します。

またはのif else時点returnで条件を使用できます。render functionternary 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 }