Как в React компоненте отобразить несколько дочерних компонентов

Question

У меня есть такая структура страницы:

export default function Page() {
  return (
    <div className="contentLayout">
      <Article photoPath = {travelPhoto}>
        <CategoryTag tagName = "TRAVEL"/>
        <AuthorArticle 
                authorName = "Luke Cage" 
                articleDate = "October 11, 2016"
        />
      </Article>
    </div>
  );
}

Я не понимаю, как мне отобразить сразу несколько дочерних компонентов в разных местах компонента Article. Сам компонент Article выглядит так:

type articleProps = {
  photoPath: string,
  children: PropsWithChildren
}

const article: FC<articleProps> = ({photoPath, children}) => {
  console.log(children);
  return (
    <div className={styles.contentViwer}>
        <div className={styles.photoWrapper}>

          // ЗДЕСЬ нужно вставить компонент CategoryTag

          <Image
              src={photoPath}
              className={styles.photo}
              alt="Logo"
              priority
            />
            <div className={styles.articleProps}>

              //ЗДЕСЬ нужно вставить компонент AuthorArticle

              <div className={styles.articleTitle}>
                The 10 most beautiful places you 
                should visit in your life
              </div>
            </div>
        </div>
    </div>
  )
}

Также, объясните мне пожалуйста как правильно в этом случае типизировать компонент Article, с учётом того, что он принимает свой props photoPath и дочерние компоненты children (мой пример с type корректно не работает).

Answer 1

Я не понимаю, как мне отобразить сразу несколько дочерних компонентов в разных местах компонента Article.

Тут нужно вспомнить что в пропсы, таких элементов-оберток, передается целая коллекция children. Вот именно ее "коллекционность" и нужно использовать.

//
function Test({children}) {
  return <section>
    <h1>Заголовок</h1>
    {children[0]}
    <hr />
    {children[1]}
  </section>
}
//
function App() {
  return <main>
    <Test>
      <p>Первый элемент</p>
      <p>Второй элемент</p>
    </Test>
  </main>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Как в React компоненте отобразить несколько дочерних компонентов

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