JSX（React）でコンポーネントの配列をpropsとして渡し、子コンポーネントでさらにpropsを追加して表示する方法

Question

#知りたいこと
Reactでコンポーネントの配列をpropsとして子に渡し、子でさらにpropsを追加して表示することはできるのでしょうか。

以下のコードはやりたいことのイメージです。
あくまでイメージを表現したものであり、実際に実行しようとすると構文エラーとなり実行できません。

import React, { FC, useState } from 'react';

const Component1: FC<{ className?: string; text: string }> = ({
  className,
}) => {
  return <div className={className}>コンポーネント１</div>;
};
const Component2: FC<{ className?: string }> = ({ className }) => {
  return <div className={className}>コンポーネント2</div>;
};
const Component3: FC<{ className?: string }> = ({ className }) => {
  return <div className={className}>コンポーネント3</div>;
};

const Parent: FC = () => {
  return (
    <>
      {/* 表示したいコンポーネントをpropsとして配列で渡す　この時点でpropsを渡してもOK */}
      <Child
        components={[
          <Component1 text="test" />,
          <Component2 />,
          <Component3 />,
        ]}
      />
    </>
  );
};

type Props = {
  components: FC[];
};

/**
 * コンポーネントの配列をPropsで受け取り表示するコンポーネント
 */
const Child: FC<Props> = ({ components }) => {
  const [viewComponentNumber, setViewComponentNumber] = useState(0);

  const GetComponent = components[viewComponentNumber];

  return (
    <>
      <button type="button" onClick={() => setViewComponentNumber(0)}>
        view1
      </button>
      <button type="button" onClick={() => setViewComponentNumber(1)}>
        view2
      </button>
      <button type="button" onClick={() => setViewComponentNumber(2)}>
        view3
      </button>

      {/* 表示するときにさらにpropsを追加できる */}
      <GetComponent className={`class-${viewComponentNumber}`} />
    </>
  );
};

export default Parent;

ご教示宜しくお願い致します。

Answer 1

Reactでコンポーネントの配列をpropsとして子に渡し、子でさらにpropsを追加して表示することはできるのでしょうか。

例えば以下のような方法でできるのはできますが、そのような実装が必要なケースが特に思いつかないですね。
可読性が下がる一方だと思われますので、可能であれば実装方法よりもコンポーネント設計の見直しを先に注力した方が良いかなと思います。

      <Child
        components={[
          ({className}) => <Component1 text="test" className={className} />,
          ({className}) => <Component2 className={className} />,
          ({className}) => <Component3 className={className} />,
        ]}
      />

Comments

[tanana_m]

ありがとうございます！