React で複数の children を渡す方法

Question

<dl>
  <dt>{title}</dt>
  <dd>{text}</dd>
</dl>

<section>
  <h2>{heading}</h2>
  <div>
    // 別のコンポーネントやDOMの集合など
  </div>
</section>

上記はどちらもコンポーネントのテンプレート部分とします。
スタイルはCSS in JS を使用しています。

dl の例であれば props で渡してもよいと思いますが
section の例のように children にコンポーネントやDOMを含む場合のよい渡し方はありますでしょうか。

h2 と div ごと渡してしまうと、このコンポーネントを使うたびに親コンポーネント側でスタイルを当てる必要があるため
それは現実的ではないと考えています。

Vue であれば <slot name="heading"> <slot name="content"> のように渡せるのですが同じような仕組みはあるのでしょうか。

Answer 1

たとえば

const SomeSection = ({ heading, children }) => {
  return (
    <section>
      <h2>{heading}</h2>
      <div>
        {children}
      </div>
    </section>
  );
}

というコンポーネントを作っておいて、

      <SomeSection heading='あいうえお'>
        <img src="https://dummyimage.com/100x100/3700ff/fff&text=Icon" />
        <ul>
          <li>かきくけこ</li>
          <li>さしすせそ</li>
        </ul>
      </SomeSection>

だったり

      <SomeSection heading='かきくけこ'>
        <div>
          <a href="https://example.com">たちつてと</a>&nbsp;
          <a href="https://example.com">なにぬねの</a>
        </div>
        <textarea readOnly>さしすせそ</textarea>
      </SomeSection>

と書けば、<SomeSection>と</SomeSection>で囲まれた部分が SomeSection の返すJSXの中の{children}としてrenderされます。

・・・というのは回答になってないでしょうか？

Comments

[machine_machine]

ご回答ありがとうございます！
この形も検討していました。

Vue のほうが慣れているもので slot 的なものがあればそちらを使いたいと考えていましたが、
props で渡すのでもまったく問題ないですね。ありがとうございました。

[退会済みユーザー]

コメントありがとうございます。
自分は逆にVueのほうが不慣れで slot は詳しくなかったので、回答になっているか一抹の不安がありましたが問題解決の一助になりましたようでよかったです！