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")
);
Потому что кроме 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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP