#24 React+Typescipt Props Children类型示例

在React和TypeScript中处理children prop是组件编写中的一个常见模式，允许你将组件作为其他组件的子组件传递。这里介绍几种使用children prop的方法，并展示如何在TypeScript中为它们提供类型注解。

1. 直接使用React.FC

React.FC（或React.FunctionComponent）类型自动为组件的props类型添加children属性。这是使用children最简单的方法。

const Card: React.FC = ({ children }) => {
  return <div className="card">{children}</div>;
};

// 使用组件
const App = () => (
  <Card>
    <h2>Title</h2>
    <p>This is some content</p>
  </Card>
);

2. 明确声明children类型

如果你需要更明确地控制children的类型，可以在props接口中显式声明它。

interface ContainerProps {
  children: React.ReactNode; // React.ReactNode可以包含几乎所有类型的子组件
}

const Container: React.FC<ContainerProps> = ({ children }) => {
  return <div className="container">{children}</div>;
};

// 使用组件
const App = () => (
  <Container>
    <p>Explicit children type</p>
  </Container>
);

3. 使用具体的子组件类型

有时你可能想要限制children可以接受的具体类型，例如只允许特定的几个组件作为子组件。

interface ButtonProps {
  children: string; // 限制children为字符串
}

const Button: React.FC<ButtonProps> = ({ children }) => {
  return <button>{children}</button>;
};

// 使用组件
const App = () => (
  <Button>Click Me</Button>
);

4. 使用TypeScript的泛型

如果你想要创建一个容器，它能够接受任意类型的children，同时还想在组件内部对children的类型有所控制，可以使用TypeScript的泛型。

interface GenericContainerProps<T> {
  children: T;
}

const GenericContainer = <T extends {}>({ children }: GenericContainerProps<T>) => {
  return <div>{children}</div>;
};

// 使用组件
const App = () => (
  <GenericContainer<Array<string>>>
    {['Item 1', 'Item 2']}
  </GenericContainer>
);

5. 函数作为子组件

有时候，你可能想传递一个函数作为子组件（也称为render prop模式），这在高阶组件或需要特殊渲染逻辑的组件中特别有用。

interface RenderProps {
  children: (count: number) => JSX.Element;
}

const Counter: React.FC<RenderProps> = ({ children }) => {
  const [count, setCount] = React.useState(0);
  return <div>{children(count)}</div>;
};

// 使用组件
const App = () => (
  <Counter>
    {(count) => <div>Current count: {count}</div>}
  </Counter>
);

通过这些示例，你可以看到在React和TypeScript中有多种方式来处理和类型化children prop，从而灵活地创建可重用且类型安全的组件。