Использование оператора AND внутри блока кода JSX

Question

В одном из кода компонента функции React я вижу следующее:

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

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

Теперь мой вопрос, является ли это какой-то часто используемым шаблоном, когда кажется, что только если «fetched» имеет значение true * переводит go во 2-е выражение и отображает компонент Table.

Пожалуйста, дайте мне знать, если это правда.

Answer 1

Да, это действительно так, и это очень распространенный шаблон в JSX. Он основан на том, как работает &&.

Этот оператор оценивает первый операнд, используя ToBoolean:

• , если первый операнд оценивается как false, этот операнд возвращается
• , если первый операнд оценивается как true, возвращается второй операнд

Точно, && НЕ возвращает логические значения. Возвращает один из своих операндов. Почему это также работает в операторах if, как и следовало ожидать, потому что возвращаемый операнд implicitly coerced имеет логическое значение там.

Зная все это, вы можете использовать оператор && для условной визуализации фрагмента. JSX, используя его в качестве второго операнда.

Если вас интересует больше об этом topi c, я бы порекомендовал: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Answer 2

Да, это правильно. Точно так же, как вы можете присвоить значение переменным, если другая переменная является ложной, в следующем случае, предполагая, что falsyValue является ложной (null, undefined ...), оператор OR поймает это как ложное, но потому что это значение вместо "это истинное значение, то это значение, которое будет присвоено.

С другой стороны, если falsyValue верно, то, поскольку есть оператор ИЛИ, нет необходимости продолжать (учитывая, что только 1 значение должно быть истинным), поэтому значение, которое содержит falsyValue, будет присвоено value.

const value = falsyValue || "this value instead"

Вы также можете выполнить

isValid && myFunction()

myFunction, будет выполняться только если isValid истинно

то же самое относится и к JSX,

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

Это вернет пустое <div></div>, если fetched не верно / верно