Что эквивалентно ng-if в реакции .js?

Ответ 1

Как насчет тернарный оператор?

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

Ответ 2

Я оставляю это здесь для исторических целей, пожалуйста, см. мои изменения ниже для гораздо лучшего решения после того, как вы разработали какое-то время реагировать Я закончил создание компонента 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>
   }
}

Im, новый для этого, возможно, может быть улучшен, но помогает мне в моем переходе от Angular

ИЗМЕНИТЬ

См. правки ниже для лучшего объяснения, когда у меня больше опыта

Спасибо Jay Comment ниже, отличная идея:

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

ИЛИ

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

Подобно некоторым другим ответам, но работает встроенным, вместо использования всего блока/функции рендеринга не требуется специальный компонент, и вы можете использовать оператор else с тройным оператором. Плюсы элементов, содержащихся в инструкции if, не вызывают ошибки, если их родительский объект не существует. Т.е. если if props.value не существует, то props.value.value2 не будет вызывать ошибку.

Смотрите этот ответ fooobar.com/questions/31329/... Забастовкa >

ИЗМЕНИТЬ 2:

В соответствии с приведенной выше ссылкой (fooobar.com/questions/31329/...), и после гораздо большего опыта разработки приложений для приложений, это не лучший способ сделать что-то.

Условные операторы в реагировании на самом деле очень легко получить голову. Есть два способа сделать что-то:

//Show if someItem
{someItem && displayThis}

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

Одно предупреждение, которое вы могли бы нанести, - если "someItem" не является логическим выражением. Если он сказал, что 0 реагирует, будет печатать 0 или реагировать на 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), поскольку он неявно преобразует результат в логическое выражение.

Ответ 3

Если у вас есть и другие элементы, вы можете обернуть только условное выражение так:

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

Ответ 4

Немного приятнее:

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

Ответ 5

Я могу представить, по крайней мере, три разных способа имитации ng-if функциональности в React

• если
• Переключатель
• IIFE (непосредственное выражение функции)

Вы можете прочитать сообщение здесь: Angular ng-if Эквивалент в компоненте 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;
  }
});

Ответ 6

Я просто хотел добавить, что *ngIf в angular не создает экземпляр компонента, к которому он прикреплен. В React, если вы используете оператор if внутри оператора return он все равно будет создавать экземпляр компонента, даже если он не отображается. Чтобы добиться истинного поведения типа *ngIf в React, вы должны создать переменную, которая содержит условный компонент вне оператора return:

render() {

  const show = false

  return (
    if (show) {
       <AwesomeComponent />   //still instantiated
    }
  )
}

render() {

  let c = null
  const show = false

  if (show) {
    c = <AwesomeComponent />   //not instantiated
  }
  return (
    c
  )
}

Ответ 7

false, null, undefined и true являются действительными дочерними. Они просто не визуализации. Эти выражения JSX будут отображать одно и то же:

Итак, вы можете попробовать это

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

это может быть полезно для условного рендеринга элементов React. Этот JSX отображает только условие if и будет отображаться только в том случае, если someArray.length > 0

Ответ 8

Мне не нравится иметь много троичных операторов в коде. Вот почему я сделал библиотеку с парой полезных компонентов. "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

Ответ 9

Я также исхожу из углового фона и искал простой вкладыш, чтобы показать тег, если переменная имеет какие-либо элементы. Это сработало для меня:

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

Ответ 10

Я являюсь создателем Tersus-jsx.macro, и я думаю, что этот модуль предоставляет именно то, что нужно для этого вопроса.

Вместо того, чтобы смешивать выражения JSX и ES6 для достижения ng-if или ng-repeat, этот макрос позволяет делать то же самое, что и в AngularJS для 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-реагировать на приложение поддерживает Babel-Macro из коробки, все, что вам нужно сделать, это npm установить этот модуль, обернуть результат рендеринга "tersus" и начать назначать эти реквизиты.

Вы можете установить это с: https://www.npmjs.com/package/tersus-jsx.macro