Add/improve documentation for typing function components with access to children

With the introduction of React Hooks, the documentation recommends using function components instead of class components in the future.

However, I wonder how to define and type the component's properties when I want to access children components. I have come up with this solution (I am using Typescript):

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>
  );
}

This seems to work, but I have a couple of questions:

1. Is this the best practice to model wrapper components with children?
2. Is ReactNode the correct, most general type for children?
3. How does React automagically know that the children are assigned to props.children? Is this hardwired to the name children or is there anything I should be aware of?
4. Is the above documented anywhere at all on the React website?

Thanks a lot in advance for your help.

Bắt đầu với ví dụ về component wrapper bằng TypeScript trong issue này và xem lại tài liệu hiện có trên trang web React về function component và children. Xác định điểm bắt đầu phù hợp trong tài liệu, sau đó đảm bảo rằng phần hướng dẫn liên quan trả lời bốn câu hỏi về việc định kiểu, ReactNode, props.children và liệu hành vi đó có được ghi lại trong tài liệu hay không.