最后，经过一个小时的搜索，它使用了这样的条件表达式：

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

建议的解决方案实际上是 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>

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

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

如果你正在寻找更接近于 Angular 的 ng-show/ng-hide/ng-if 的东西，而不是将 JSX 表达式与 ES6 混合在一起——这不太优雅，你可能想尝试我创建的一个module——Tersus—— jsx.宏。

而不是这样做：

<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-react-app 现在支持 Babel-Macro 开箱即用。所有需要做的是 npm install 这个module，用“tersus”包装渲染返回并开始分配props。这也支持 ng-repeat/ng-（使用 tj-for）并且可以与 tj-if 混合使用。

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