Почему компоненты в React перезаписывают себя?

Question

Изучаю React. Заметил, что последний children компонент перезаписывает предыдущий: в моем случае после рендеринга <Feedback /> присутствует в DOM, а <Header text="Отзывы" /> отсутствует.

Описания причины такого поведения не смог найти. Не могли бы вы подсказать, как это исправить, и где это описано.

Код:

function Header(props) {
  return (
    <header>
      <h1>{props.text}</h1>
    </header>
  );
}

function Feedback() {
  return (
    <ul></ul>
  );
}

function App() {
  return(
    <Header text="Отзывы" />,
    <Feedback />
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Answer 1

По правилам React Вы можете вернуть только один элемент из метода render. Заверните Ваши компоненты, например в div или воспользуйтесь React Fragment'ом что бы сохранить оригинальную верстку:

return (
    <React.Fragment>   
       <Header text="Отзывы" /> // запятая тут не нужна
       <Feedback />
    </React.Fragment> 
)

Запись:

<React.Fragment></React.Fragment>

аналогична (тоже самое что):

<></>

Answer 2

Потому что кроме React было бы неплохо ещё и JavaScript изучить.

Когда вы пишите конструкцию вида (a, b) - вы используете оператор "запятая", который во всех Си-подобных языках возвращает последний аргумент.

Чтобы вернуть несколько элементов - вам нужен контейнер. React в качестве контейнера предлагает использовать фрагмент: <>a b</>.

БЛОГ НА HUSL

Почему компоненты в React перезаписывают себя?

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