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

Question

In one of the React function component code, I see the following;

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

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

Now my question is if this is some kind of commonly used pattern where it seems like only if "fetched" is true, does it go to the second expression and render the Table component?

Answer 1

Yes, that is correct. Just as you can assign a value to a variables if another variable is falsy, in the following case, assuming that falsyValue is falsy (null, undefined...) the OR operator will catch that as false, but because "this value instead" is a truthy value then that's the value that will be assigned.

On the other hand, if falsyValue is truthy, then because there's an OR operator there's no need to continue (given that only 1 value has to be true) so the value that falsyValue contains will be assigned to value .

const value = falsyValue || "this value instead"

You can also do

isValid && myFunction()

myFunction will only be executed if isValid is true

same goes for JSX,

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

This will return an empty <div></div> unless fetched is true/truthy

Answer 2

Yes that is exactly true and it's very common pattern in JSX. It's based around how && works.

This operator evaluates the first operand using ToBoolean :

• if the first operand is evaluated as false , this operand is returned
• if the first operand is evaluated as true , the second operand is returned

Yes exactly, && does NOT return boolean values. It returns one of it's operands. Why this also works in if statements as you would expect is because the returned operand is implicitly coerced into a boolean value there.

Knowing all this, you can use && operator to conditionally render a piece of JSX by using it as a second operand.

If you are interested in more about this topic, I would recommend: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Answer 3

Yes that is a commonly used pattern and it will not return the JSX Table element unless fetched is truthy. The React documentation goes over many ways to have conditional logic in your JSX code: https://reactjs.org/docs/conditional-rendering.html .

Something to note that the other answers did not address is that a value like 0 is falsy, so if it is used with an && operator it will return 0, which is valid JSX element content and it will be rendered so you have to be careful with that.

In this example below, <div>0</div> will be rendered by the render method:

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

The falsy values of 0 & NaN will be rendered as the JSX element's content, but the falsy values of false , null , undefined , and "" will cause nothing to be rendered as the JSX element's content.

Here is a little more information on falsy values in javascript: https://developer.mozilla.org/en-US/docs/Glossary/Falsy .