在 react js 中是否有 ng-show 和 ng-hide 的等价物?

Question

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

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

在Angular中，上面的代码运行良好，但我正在尝试使用 react 来做到这一点，我找不到等效的......

Answer 1

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

最后，它在搜索一个小时后使用如下条件表达式工作：

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

Answer 3

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

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

Answer 4

如果你正在寻找更接近 Angular 的 ng-show/ng-hide/ng-if for 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-react-app现在支持开箱即用的Babel-Macro。所有需要做的就是 npm 安装这个模块，用 "tersus" 包装渲染返回并开始分配道具。这也支持 ng-repeat/ng-(使用 tj-for)，并且可以与 tj-if 混合使用。

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

Answer 5

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

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

<MyVarContainer show={whateverCondition} />

然后是组件本身：

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

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