React高阶组件Wrapper函数为何返回箭头函数而非直接使用JSX？

• 高阶组件（HOC）的本质要求：React里的高阶组件定义是「接收一个组件作为参数，返回一个新组件的函数」。你写的Wrapper就是一个高阶组件，必须返回一个可被React识别为组件的结构——也就是函数或类组件，而不是直接返回JSX元素。

• 直接返回JSX的问题：
  如果你直接return JSX代码，比如：

  const Wrapper = (WrappedComponent, className) => {
    return (
      <div className={className}>
        <WrappedComponent />
      </div>
    );
  };
  

  此时Wrapper执行后返回的是一个React元素（已经渲染好的DOM节点描述），而不是一个可复用的组件。当你尝试把这个结果当作组件使用时（比如<EnhancedComponent />），React会报错，因为它期望的是能接收props并动态渲染的组件，而不是一个静态的元素。

• 返回箭头函数的作用：
  返回的箭头函数本身就是一个新的函数组件，它具备组件的核心能力：

  1. 可以接收外部传入的props，你还可以把这些props传递给被包裹的组件（建议改成<WrappedComponent {...props} />，这样原始组件能拿到外部传的参数）；
  2. 可以被多次复用，每次使用时都能根据传入的props动态渲染内容；
  3. 完全符合高阶组件的定义，实现了对原始组件的增强（这里是添加外层容器类名）。

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