react.js의 ng-if에 해당하는 것은 무엇입니까?

Question 1

나는 angular를 사용하여 반응하기 위해오고 있으며 조건에 따라 요소를 렌더링하거나 렌더링하지 않는 angular의 ng-if 지시문에 대한 좋은 반응 대안을 찾으려고합니다. 예를 들어이 코드를 사용하십시오. 나는 typescript (tsx) btw를 사용하고 있지만 그다지 중요하지 않습니다.

"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

나는 이것을 역사적인 목적으로 여기에 남겨두고 있습니다. 한동안 반응에서 개발 한 후 ~~NgIf 구성 요소를 만든~~ 후 훨씬 더 나은 솔루션을 위해 아래 편집을 참조하십시오 ~~(이것은 반응 네이티브이지만 아마도 반응을 위해 작동합니다)~~

암호:

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에서 전환하는 데 도움이됩니다.~~

편집하다

더 많은 경험이 있으면 더 나은 설명을 위해 아래 편집을 참조하십시오.

아래의 Jay의 의견 덕분에 좋은 아이디어도 있습니다.

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

또는

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

다른 답변 중 일부와 비슷하지만 전체 렌더 블록 / 함수를 사용하는 대신 인라인으로 작동하며 특별한 구성 요소가 필요하지 않으며 삼항 연산자와 함께 else 문을 사용할 수 있습니다. if 문에 포함 된 Plus 항목은 부모 개체가없는 경우 오류를 발생시키지 않습니다. 즉 props.value, 존재하지 않으면 props.value.value2오류가 발생하지 않습니다.

~~이 답변을 참조하십시오 https://stackoverflow.com/a/26152067~~

편집 2 :

위의 링크 ( https://stackoverflow.com/a/26152067 )에 따라 반응 앱 개발에 더 많은 경험을 쌓은 후에는 위의 방법으로 작업을 수행하는 가장 좋은 방법이 아닙니다.

반응의 조건부 연산자는 실제로 머리를 돌리기 매우 쉽습니다. 작업을 수행하는 방법에는 두 가지가 있습니다.

//Show if someItem
{someItem && displayThis}

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

한 가지주의 할 점은 "someItem"이 부울 표현식이 아닌 경우입니다. 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

나는 *ngIfangular에서 그것이 연결된 구성 요소를 인스턴스화하지 않는다는 것을 추가하고 싶었 습니다. React에서 문 내에서 if 문을 사용하면 return표시되지 않더라도 구성 요소를 인스턴스화합니다. *ngIfReact에서 진정한 유형 동작 을 달성하려면 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 기능을 시뮬레이션하는 적어도 세 가지 방법을 생각할 수 있습니다.

만약
스위치
IIFE (즉시 호출 된 함수 표현)

여기에서 게시물을 읽을 수 있습니다 : Angular의 ng-if Equivalent In a React Component

기본적으로 다음과 같이하고 싶습니다.

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는 if 조건이 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의 작성자이며이 모듈이이 질문에 필요한 것을 정확히 제공한다고 생각합니다.

ng-if 또는 ng-repeat를 달성하기 위해 JSX 표현식과 ES6를 혼합하는 대신이 매크로를 사용하면 React JSX 용 AngularJS에서와 동일한 방식으로 작업을 수행 할 수 있습니다 (예 : 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

나는 각진 배경에서도 왔으며 변수에 요소가 있으면 태그를 표시하는 간단한 라이너를 찾고있었습니다. 이것은 나를 위해 일했습니다.

<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

표현이 진실이고 다른 하나가 옵션 인 경우를 대비하여 표현과 두 개의 또 다른 인수를 템플릿으로 취하는 방법을 만듭니다.

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 function나 ternary 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 }