如何键入可访问子级的纯功能性 React 包装器组件

Question

随着 React Hooks 的引入，React 的创建者建议将来使用 function 组件。

但是，我想知道当我想访问子组件时如何定义和键入组件的属性。 我想出了这个解决方案：

import * as React from "react";
import "./styles.css";

type MyWrapperCompProps = {
  color: string;
  children?: React.ReactNode;
};

function MyWrapperComp(props: MyWrapperCompProps) {
  return <div style={{ backgroundColor: props.color }}>{props.children}</div>;
}

export default function App() {
  return (
    <div className="App">
      <MyWrapperComp color="tan">
        <h1>Hello World!</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, fuga.
        </p>
      </MyWrapperComp>
    </div>
  );
}

这似乎有效，但我有几个问题：

1. 这是 model 包装器组件的最佳实践吗？
2. ReactNode是children的正确类型吗？
3. React 如何自动知道孩子被分配给props.children ？
4. 以上内容是否记录在 React 网站上的任何地方？