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

Question 1

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

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

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

Question 4

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

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

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

Naguib Ihab · Answer 1 · 1 November 2019 в 16:31