В React div должен содержать один дочерний элемент?

Question

class Chosen extends React.Component {
  render() {
    return (
      <div>
<select className="Chosen-select" ref={el => this.el = el}>{this.props.children}
        </select>
      </div>
    );
  }
}

В документации по React в статье про Взаимодействие с сторонними библиотеками под данным кодом написано, что

React всегда ожидает только один дочерний элемент для . Так мы гарантируем, что обновления React не будут конфликтовать с дополнительным узлом, добавляемым Chosen. Если вы собираетесь изменять DOM вне React, важно убедиться, что React не взаимодействует с DOM-узлами.

Является ли утверждение в документации ошибкой или я не правильно интерпретирую его смысл? Если я правильно понимаю необходимо наличие одного родительского элемента, который в свою очередь может вмещать неограниченное количество дочерних

Answer 1

Компонент должен возвращать один один элемент. Чтобы не создавать лишние DOM-элементы, Вы можете оборачивать нужные дочерние элементы в React.Fragment

const SomeComponent = () =>
    <React.Fragment>
       <div>div1</div>
       <div>div2</div>
       ...
    <React.Fragment/>

или

const SomeComponent = () =>
    <>
       <div>div1</div>
       <div>div2</div>
       ...
    </>

что является сокращением React.Fragment.

Еще одним вариантом является возврат массива элементов:

const SomeComponent = () => {
   //какая-то логика
   
   return ([
      <div>div1</div>,
      <div>div2</div>,
      <div>div3</div>,
      ...
   ])
}

БЛОГ НА HUSL

В React div должен содержать один дочерний элемент?

Ответы (1 шт):