Почему "0" отображается при оценке короткого замыкания `array.length && ...` - PullRequest
Новая
       15

Почему "0" отображается при оценке короткого замыкания `array.length && ...`

3 голосов
/ 12 марта 2020

В настоящее время я вижу поведение, подобное этому: 

render() {
   const list = [];
   return (
      <div>
         { list.length && <div>List rendered</div> }
      </div>
   )
}

Мое ожидаемое ничего не отображается с этим условием, но отображается строка "0" (строка "0" равна list.length). Я не знаю почему. Кто-нибудь может помочь мне объяснить этот случай React?

Ответы [ 3 ]

4 голосов
/ 12 марта 2020

Это на самом деле не относится к React, а скорее к JavaScript напрямую: 

const output = list.length && "foobar";

Если list.length равно falsy , тогда output примет его значение (в данном случае 0), а не false, как можно подумать.

2 голосов
/ 12 марта 2020

По сути, так рассчитывается оценка короткого замыкания :

Поскольку логические выражения оцениваются слева направо, они проверяются на возможную оценку "короткого замыкания" используя следующие правила:

(некоторое ложное выражение) && expr - это короткое замыкание , оцененное как ложное выражение

Таким образом, 0 возвращается со строкой { list.length && <div>List rendered</div> }, хотя он также оценивается как ложный , он не игнорируется при рендеринге как противоположность false, null, undefined или true.

Итак, если вы хотите, чтобы выражение короткого замыкания возвращало одно из игнорируемых значений, вы можете сделать это следующим образом: 

{ list.length>0 && <div>List rendered</div> }

Ниже приведена краткая демонстрация в качестве подтверждения концепции: 

const { render } = ReactDOM

const Component = () => {
  const list = []
  return (
      <div>
         <div>Rendered on <code>{`list.length>0 && <div>List rendered</div>`}</code>:{ list.length>0 && <div>List rendered</div> }</div>
         <div>Rendered on <code>{`list.length && <div>List rendered</div>`}</code>:{ list.length && <div>List rendered</div> }</div>
      </div>
   )
}

render (<Component />, document.getElementById('root'))
code {background-color: grey; color:white;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
1 голос
/ 12 марта 2020

Я немного опоздал с ответом, но я бы хотел express моего понимания.

Как и в другом ответе @ sp00m, ясно объясняется, что он не имеет отношения к React , но является функцией javascript.

Что это делает?

Когда левая сторона ложная, тогда она примет значение, так как в вашем случае это будет 0 из-за [].length. Это заставляет печатать "0" в DOM.

Решение:

Вы можете сделать это для истинного ожидания, такого как [].length > 0 или [].length !== 0 или !![].length, или сделать троичный оператор для отображения компонента dom.
Последний один преобразует ложные / истинные значения в логическое значение.

...