TransWikia.com

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

Stack Overflow на русском Asked by 118_64 on November 5, 2021

Изучаю React, заметил, что последний child-компонент перезаписывает предыдущий.

В моем случае после рендеринга <Feedback /> присутствует в DOM, а <Header /> отсутствует.

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

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")
);

2 Answers

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

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

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

Answered by Pavel Mayorov on November 5, 2021

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

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

Запись:

<React.Fragment></React.Fragment>

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

<></>

Answered by Vasily on November 5, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP