Question

react.js 中是否有vector和ng-show的等效内容？

ng-hide

在 Angular 中，上面的代码效果非常好，但我正在尝试使用反应，我无法找到相应的代码....

Answer 1

最后，它在使用条件表达式搜索一小时之后起作用了：

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

Answer 2

建议的解决方案实际上是＆＃34; ng-if＆＃34; React的等价物。如果使用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中没有任何内容可以像角度js一样显示和隐藏。 Reactjs用于显示视图。但您可以使用三元运算符来完全填充您的requiremenet，如下所示： -

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

Answer 4

如果您正在寻找更接近Angular的ng-show / ng-hide / ng-if用于React的方法，而不是将JSX表达式与ES6混合使用-这不太美观，那么您可能想尝试一下我创建的模块-Tersus-jsx.macro。

而不是这样做：

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

您现在可以像在AngularJS中一样简单地定义一个tj-if道具：

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

还要感谢最新版本的create-react-app现在支持Babel-Macro。所有需要做的就是npm安装该模块，用“ tersus”包装渲染返回并开始分配道具。这也支持ng-repeat / ng-（使用tj-for），并且可以与tj-if混合使用。

您可以从以下位置安装它： https://www.npmjs.com/package/tersus-jsx.macro

Answer 5

此解决方案需要更多代码并创建一个单独的组件。但是看起来更整洁。

放置一个组件并将条件作为prop传递

<MyVarContainer show={whateverCondition} />

然后是组件本身：

function MyVarContainer (props){
    if (props.show){
        return (
            <div>
                <h1>Welcome</h1>
                <p>Welcome to my home</p>
            </div>
        )
    }
    return null
}

请注意，您无需将组件放在单独的文件中。因此，您也不需要导出/导入。

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

5 个答案: