Как правильно выводить несколько компонентов React.js в одной функции

Рейтинг: 0Ответов: 1Опубликовано: 24.08.2023

Пробую сверстать тривиальный проект на React.js, покрутить и потыкать что да как для опыта. Столкнулся с такой проблемой: как я понял, по итогу всё сводится к тому, что функция App() в файле app.js должна возвращать один единственный блочный элемент (компонент)

function App() {
  return (
    <Some_main_component/>
  );
}

Но у меня уже структура такая что я тремя отдельными компонентами сверстал <Header />, <Main /> и <Footer /> и я по неопытности пытался вернуть в App(), что, разумеется, не работает

import Header from '...'
import Main from '...'
import Footer from '...'

function App() {
    return (
        <Header />
        <Main />
        <Footer />
    );
}

Решение проблемы которое приходит в голову - это сверстать условный <Site /> компонент, импортировать в него 3 компонента выше и уже его выводить его в функцию App(). Просто оборачивать <Header />, <Main /> и <Footer /> в <div> на выходе, считаю вообще неуклюжим решением, ибо семантика покинет чат. Так что хочу узнать у опытных:

  1. Считается ли грамотным 1-ый подход?
  2. Как делают на реальных проектах?

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

Всем заранее спасибо!

javascript reactjs семантика
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Используйте React.Fragment, сокращенно <>

function App() {
    return (
        <>
            <Header />
            <Main />
            <Footer />
        </>
    );
}