Как избежать дополнительной упаковки <div> в React?

Ответ 1

Это требование было удалено в React версии (16.0)]1, так что теперь вы можете избежать этой оболочки.

Вы можете использовать React.Fragment для отображения списка элементов без создания родительского узла, официальный пример:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Подробнее здесь: Фрагменты

Ответ 2

Обновление 2017-12-05: React v16.2.0 теперь полностью поддерживает рендеринг фрагментов с улучшенной поддержкой возврата нескольких дочерних элементов из метода рендеринга компонентов без указания ключей в дочерних элементах:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Если вы используете версию React до версии 16.2.0, вместо этого также можно использовать <React.Fragment>...</React.Fragment>:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Оригинал:

В React v16.0 появилось возвращение массива элементов в методе рендеринга, не помещая его в div: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

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

В будущем, вполне вероятно, добавим специальный синтаксис фрагмента в JSX, который не требует ключей.

Ответ 3

Ты можешь использовать:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

Для получения дополнительной информации обратитесь к этой документации.

Ответ 4

Я создал компонент для обертывания дочерних компонентов без DIV. Это называется теневой оберткой: https://www.npmjs.com/package/react-shadow-wrapper

Ответ 5

Используйте [] вместо(), чтобы обернуть весь возврат.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

Ответ 6

Это по-прежнему необходимо, BUT React теперь обязательно создаст элементы без создания дополнительного элемента DOM.

Необходимая дополнительная упаковка (обычно с родительским div), поскольку для метода createElement требуется параметр type который является either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). Но это было до того, как они представили Fragment реакта.

Обратитесь к этому NEW api doc для createElement

React.createElement: создать и вернуть новый элемент React данного типа. Аргументом типа может быть либо строка имени тега (например, "div", либо "span"), тип компонента React (класс или функция) или тип фрагмента React.

вот официальный пример, Refer React.Fragment.

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

Ответ 7

Вы не сможете избавиться от этого элемента div. React.render() должен вернуть один действительный DOM node.

Ответ 8

Вот один из способов визуализации "транскулентных" компонентов:

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

Ответ 9

Существует также обходное решение. Следующий блок-код генерирует фрагмент без необходимости React.Fragment.

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})

Ответ 10

Вы можете выполнить это поведение, используя так называемое React.Fragment введение в более новых версиях React, которое позволяет возвращать несколько элементов без необходимости создания элемента-оболочки ( то есть <div>). Код будет выглядеть так:

render() {
  return (
    <React.Fragment>
      <Element1 />
      <Element2 />
    </React.Fragment>
  );
}

Вы можете прочитать больше здесь. Надеюсь, это поможет!

Ответ 11

Я знаю, что на этот вопрос дан ответ, вы, конечно, можете использовать React.Fragment, который не создает узел, но позволяет группировать такие вещи, как div.

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

https://www.youtube.com/watch?v=aS41Y_eyNrU

Это, конечно, не то, что вы бы делали на практике, но это хорошая возможность для обучения.