TypeScript で SFC の children を扱う

React Stateless Functional Component in TypeScript: Childrenの使用について

React Stateless Functional Component (SFC) は、React コンポーネントの簡潔な書き方として広く使われています。TypeScript と組み合わせることで、型安全なコードを書くことができます。

Children の型付け

SFC には、子要素 (children) を受け取るためのプロパティ children があります。TypeScript では、このプロパティの型を指定することで、子要素の型を制限することができます。

ジェネリック型を使用する

最も一般的な方法は、ジェネリック型を使用することです。これにより、任意の型の子要素を受け取ることができます。

interface MyComponentProps<T> {
  children: React.ReactNode<T>;
}

const MyComponent: React.FC<MyComponentProps<string>> = ({ children }) => {
  return <div>{children}</div>;
};

特定の型を指定する

特定の型の子要素を期待する場合、その型を直接指定します。

interface MyComponentProps {
  children: React.ReactElement<typeof MyChildComponent>;
}

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  return <div>{children}</div>;
};

SFC 内で children プロパティにアクセスし、子要素をレンダリングすることができます。

const MyComponent: React.FC<MyComponentProps<string>> = ({ children }) => {
  return (
    <div>
      {children.map((child) => (
        <p key={child.key}>{child}</p>
      ))}
    </div>
  );
};

注意事項

• 子要素の型を適切に指定することで、型エラーを防止し、コードの信頼性を向上させることができます。
• React.ReactElement は、特定の React 要素の型を表現します。
• React.ReactNode は、子要素の型を表現するユニオン型です。

例

const MyChildComponent: React.FC<{ text: string }> = ({ text }) => <p>{text}</p>;

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  return <div>{children}</div>;
};

<MyComponent>
  <MyChildComponent text="Hello" />
  <MyChildComponent text="World" />
</MyComponent>;

TypeScript で SFC の children を扱う: コード例

interface MyComponentProps<T> {
  children: React.ReactNode<T>;
}

const MyComponent: React.FC<MyComponentProps<string>> = ({ children }) => {
  return <div>{children}</div>;
};

<MyComponent>
  <p>Hello</p>
  <p>World</p>
</MyComponent>;

• MyComponentProps インターフェースは、ジェネリック型 T を受け取

React.Children API を使用する

React.Children API は、子要素の操作に便利なメソッドを提供します。

interface MyComponentProps {
  children: React.ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  return (
    <div>
      {React.Children.map(children, (child) => (
        <p key={child.key}>{child}</p>
      ))}
    </div>
  );
};

• React.Children.map メソッドは、子要素を反復処理し、新しい要素を生成します。

型ガードを使用する

子要素の型を判定し、それに応じた処理を行うことができます。

interface MyChildComponentProps {
  text: string;
}

const MyChildComponent: React.FC<MyChildComponentProps> = ({ text }) => <p>{text}</p>;

interface MyComponentProps {
  children: React.ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  return (
    <div>
      {React.Children.map(children, (child) => {
        if (React.isValidElement(child) && child.type === MyChildComponent) {
          return <p>{child.props.text}</p>;
        }
        return null;
      })}
    </div>
  );
};

• child.type === MyChildComponent で、子要素が MyChildComponent であるかどうかをチェックします。
• React.isValidElement メソッドは、要素が有効な React 要素かどうかを判定します。

カスタムフックを使用する

複雑な子要素の処理が必要な場合は、カスタムフックを使用することができます。

import { useChildren } from './useChildren';

interface MyComponentProps {
  children: React.ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  const childrenArray = useChildren(children);

  return (
    <div>
      {childrenArray.map((child) => (
        <p key={child.key}>{child}</p>
      ))}
    </div>
  );
};

• useChildren カスタムフックは、子要素を配列に変換します。