Есть ли эквивалент для ng-show и ng-hide в реакции js?

Ответ 1

Наконец, он работал после часа поиска, используя условное выражение, подобное этому:

{!myVar && <div>
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>}

Ответ 2

Предлагаемые решения на самом деле являются "ng-if" эквивалентами React. Если вы используете ng-if и состояние false, компонент не будет отображаться в DOM. Если вы используете ng-show/hide, он появится в DOM, но он будет скрыт в браузере.

Во многих случаях решение {myVar && <div />} будет работать должным образом, но могут быть случаи, когда это не идеальное решение. Потому что это будет загружать/выгружать компонент, а не показывать/скрывать. Например; если у вас есть контейнер табуляции, и вы используете его для отображения/скрытия содержимого вкладки; в зависимости от выбранной вкладки, каждый раз, когда вы загружаете/выгружаете другое содержимое. Это может быть проблемой, если вы используете редукционные формы или аналогичные подходы. Здесь вам нужно какое-то ng-show, а не ng-if.

Так как React не имеет директив атрибутов, вам нужно либо написать HOC, либо компонент оболочки (директиву элемента), который обрабатывает это. Или просто добавьте динамический встроенный стиль следующим образом:

<div style={{ display: myVar ? 'block' : 'none' }}>
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>

Ответ 3

В Reactjs, как angular js, ничего не отображается, чтобы показать и скрыть. Reactjs используется для отображения представления. Но вы можете использовать тернарный оператор, чтобы заполнить свой запрос следующим образом: -

{myVar ? <div>
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div> 
: null}

Ответ 4

Если вы ищете что-то еще ближе к Angular ng- show/ng- hide/ng-, если для React, вместо того, чтобы смешивать выражения JSX с ES6 - что не так элегантно, вы можете попробовать модуль, который я создал - Tersus-jsx.macro.

Вместо того, чтобы делать это:

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

Теперь вы можете просто определить опору tj-if точно так же, как мы это делали в AngularJS:

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

Также благодаря последней версии приложения create-реагировать-приложение теперь поддерживает Babel-Macro из коробки. Все, что нужно сделать, это npm установить этот модуль, обернуть результат рендеринга "tersus" и начать назначать реквизиты. Это также поддерживает ng- repeat/ng- (с использованием tj-for) и может использоваться совместно с tj-if.

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