reactjs - 如何为具有访问子组件能力的纯函数式 React 包装组件编写类型

随着 React Hooks 的引入，React 的创建者建议未来使用函数组件。

然而，我想知道当我想访问子组件时，如何定义和给组件的属性类型。我想出了这个解决方案：

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. 这是建模包装组件的最佳实践吗？
2. ReactNode 是 children 的正确类型吗？
3. React 怎么能神奇地知道子元素被分配到 props.children？
4. 上述内容在 React 网站上有任何地方记录吗？