反应js中有ng-show和ng-hide的等价物吗？

Question

是否有一个等效ng-show,并ng-hide在react.js？

<input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>

在Angular中,上面的代码工作得非常好,但我正在尝试使用反应,我无法找到相应的....

Answer 1

最后,它在使用条件表达式搜索一小时后工作,如下所示:

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

Answer 2

建议的解决方案实际上是React的"ng-if"等价物.如果使用ng-if且状态为false,则组件不会出现在DOM中.如果你使用ng-show/hide它将出现在DOM中,但它将隐藏在浏览器中.

在许多情况下,{myVar && <div />}解决方案将按预期工作,但可能会出现这种情况,这不是理想的解决方案.因为这将加载/卸载组件而不显示/隐藏.例如; 如果你有标签容器,你用它来显示/隐藏标签内容; 根据所选选项卡,每次加载/卸载其他内容时.如果您使用redux-form或类似方法,这可能是一个问题.在这里你需要一个ng-show有点解决方案而不是ng-if.

由于React没有属性指令,因此您需要编写HOC或处理此问题的包装器组件(元素指令).或者只是添加动态内联样式,如下所示:

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

Answer 3

Reactjs 中没有什么像 Angular js 那样可以显示和隐藏。Reactjs 用于显示视图。但是您可以使用三元运算符来完全满足您的要求，如下所示：-

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