如何在将函数组件作为props传入时启用Hot Reload？

问题场景 #

将Child函数组件作为props传入Parent组件后，修改Child组件代码无法触发热重载，相关代码示例如下：

App.tsx #

import "./styles.css";
import { Parent } from "./components/parent";
import { Child } from "./components/child";

export default function App() {
  return <Parent child={Child} />;
}

Parent.tsx #

import * as React from "react";

export const Parent: React.FC<{ child: React.FC }> = ({ child }) => {
  return (
    <div>
      Hot Reload Works
      {child({})}
    </div>
  );
};

Child.tsx #

import * as React from "react";

export const Child: React.FC = () => {
  return <div>Hot Reload Does Not Work</div>;
};

解决方案 #

问题出在Parent组件中直接调用child({})的渲染方式——这相当于执行普通函数，不会被React的热重载机制识别为组件实例。需要改为标准的组件渲染方式：

方法1：使用JSX语法渲染（推荐） #

将props传入的组件重命名为大写开头的变量（符合JSX组件命名规范），然后用标签形式渲染：

import * as React from "react";

export const Parent: React.FC<{ child: React.FC }> = ({ child: ChildComponent }) => {
  return (
    <div>
      Hot Reload Works
      <ChildComponent />
    </div>
  );
};

方法2：使用React.createElement渲染 #

如果不想重命名变量，可以用React.createElement创建组件实例：

import * as React from "react";

export const Parent: React.FC<{ child: React.FC }> = ({ child }) => {
  return (
    <div>
      Hot Reload Works
      {React.createElement(child)}
    </div>
  );
};

原理说明 #

React的热重载机制依赖于对组件挂载、更新流程的追踪，只有通过JSX或React.createElement创建的组件实例，才会被React纳入组件生命周期管理，从而在代码变更时触发热重载。直接调用组件函数无法触发这一机制，因此热重载失效。

内容的提问来源于stack exchange，提问作者Bart10