React typescript prop类型的concreate函数组件类型

Question

我有2个功能组件，我想将图标 prop 定义为concreate类型：<Icon />通过实际的实现，我可以将任何功能组件传递给<Message />我不要啦

还要打电话给我，我想这样： <Message icon={<Icon />} />

import * as React from "react";
import { render } from "react-dom";

type Props = {
  icon: () => JSX.Element;
  text: string
}

const Message: React.FC<Props> = ({icon: Icon, text}) => {
  return <div>
    <Icon />
    {text}
  </div>
}

const Icon = () => <i>...</i>

render(<Message icon={()=><Icon />} text="Test" />, document.getElementById("root"));

这是演示： https://codesandbox.io/s/react-typescript-11oqg