React: < React.Fragment > против массива

Question

React: < React.Fragment > против массива

Многие люди отмечают, что он часто используется с перерывом как неудобный способ написания «goto». Это, вероятно, так, если оно написано непосредственно в функции.

В макросе OTOH, do {something; } while (false) - это удобный способ FORCE с запятой после вызова макроса, абсолютно никакой другой токен не может следовать.

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

3

reactjs

задан jonrsharpe 19 April 2019 в 19:17

3 ответа

Другие вопросы по тегам:

reactjs

Похожие вопросы:

score 0 · Answer 1

Официальный документ гласит

Использование нотации массива имеет некоторые запутанные отличия от обычного JSX:

Дочерние элементы в массиве должны быть разделены запятыми.

Дочерние элементы в массиве должны иметь ключ для предотвращения предупреждения ключа React.

Строки должны быть заключены в кавычки.

Итак, чтобы упростить задачу, React предоставляет компонент Fragment, который можно использовать вместо массивов.

Рассмотрим, как мы можем обернуть несколько дочерних элементов, используя массив
render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}
И как этого можно достичь с помощью фрагментов.
render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}
Взято непосредственно из официального документа.

score 0 · Answer 2

Существует два основных преимущества использования фрагментов над массивом в выражении возврата

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

Пример

const ReturnFragments = () => {
  const items = list.map((item) => {
    <React.Fragment key={item.id}>
      <div key={1}>Item 1</div>
      <div key={2}>Item 2</div>
      <div key={3}>Item 3</div>
    </React.Fragment>
   })
  return items
}

score 0 · Answer 3

Когда вы создаете новый компонент, метод рендеринга должен возвращать один и только один элемент, так что обычно это оболочка из многих элементов, вместо создания бесполезного div для dom, вы можете использовать компонент фрагмента.

Цитата из фрагментов React docs:

Обычный шаблон в React - компонент возвращает несколько элементов. Фрагменты позволяют группировать список детей без добавления дополнительных узлов в DOM.

без фрагментов
    render() {
      return {
       <div> ---> Useless root
          <div>fake</div>
          <div>fake</div>
          <div>fake</div>
       </div>
     }
}
с фрагментами
  render() {
      return {
       <React.Fragment> ----> Not rendered to the DOM
          <div>fake</div>
          <div>fake</div>
          <div>fake</div>
       </React.Fragment>
     }
   }