Как добавить дополнительные компоненты React в другой компонент React с помощью реквизита

Question

Каков наилучший подход для добавления необязательных компонентов внутри компонента?

У меня есть один такой:

type Props = {
  children: React.Node,
  title?: string,
  /**May add any component next to the header. Should be inside a fragment. */
  headerComponents?: React.Node,
  className?: string,
}

export const Content = ({ children, className, title, headerComponents }: Props) => (
  <div className={`page-content ${className}`}>
     <div className='page-content-header'>
       {
         title && (
           <h2 className='content-title'>{title}</h2>
         )
       }
       {
         headerComponents && (
           <div className='page-header-right'> {headerComponents} </div>
         )
       }
     </div>
    {children}
  </div>
);

headerComponent действует как опора, которая может получить другой компонент, например:

<Page.Content
  headerComponents={
    <>
      <Button>First</Button>
      <Button>Second</Button>
    </>
  }
  title='Example title'
>
  <div>Example text</div>
</Page.Content>

И это работает. Но мне интересно, есть ли лучший подход.

Answer 1

Этот подход мне подходит. Чтение и интуитивно понятный способ передачи реквизитов компоненту с последующей условной визуализацией необязательных компонентов на основе значений реквизитов.