时间戳

首页 > 解决方案 > 在 JSX 代码块中使用 AND 运算符

reactjs - 在 JSX 代码块中使用 AND 运算符

问题描述

在其中一个 React 函数组件代码中，我看到以下内容；

const [fetched, setFetched] = useState(false);

{fetched && (
            <Table
              states={states}
            />
          )}

现在我的问题是，这是否是某种常用模式，似乎只有“fetched”为真时，它是否会转到第二个表达式并呈现 Table 组件。

请让我知道这是否属实。

标签： reactjsreact-hooks

解决方案

是的，这是一种常用的模式，它不会返回 JSX Table 元素，除非fetched它是真实的。React 文档介绍了多种在 JSX 代码中使用条件逻辑的方法：https ://reactjs.org/docs/conditional-rendering.html 。

需要注意的是，其他答案没有解决的是像 0 这样的值是虚假的，所以如果它与 && 运算符一起使用，它将返回 0，这是有效的 JSX 元素内容，它将被渲染，所以你必须小心接着就，随即。

在下面的这个例子中，<div>0</div>将由 render 方法渲染：

render() {
    const count = 0;  
    return (
        <div>
            { count && <h1>Messages: {count}</h1> }
        </div>
    );
}

0&的虚假值NaN将被呈现为 JSX 元素的内容，但false, null,undefined和的虚假值""将导致没有任何内容被呈现为 JSX 元素的内容。

以下是有关 javascript 中虚假值的更多信息：https ://developer.mozilla.org/en-US/docs/Glossary/Falsy 。

推荐阅读