javascript - 从工厂 react 组件名称

我有两个组成部分：

const CustomSelfDefinedComponent = () => <React.Fragment />;
const CustomSelfDefinedViaFactoryComponent = (() => () => <React.Fragment />)();

在浅渲染上，我得到下一个：

        <CustomSelfDefinedComponent />
        <Component />

谁能指出我为什么在第二种情况下快照中没有CustomSelfDefinedViaFactoryComponent作为组件名称的原因？

我看到它编译为：[BABEL PLAYGROUND]的原因

"use strict";

var CustomSelfDefinedComponent = function CustomSelfDefinedComponent() {
  return /*#__PURE__*/React.createElement(React.Fragment, null);
};

var CustomSelfDefinedViaFactoryComponent = function () {
  return function () {
    return /*#__PURE__*/React.createElement(React.Fragment, null);
  };
}();

有什么办法吗？

最佳答案

我想React依靠function.name来获取默认的组件名称，所以在第一种情况下

const CustomSelfDefinedComponent = () => <React.Fragment />;
CustomSelfDefinedComponent.name -> "CustomSelfDefinedComponent"

而在第二个匿名函数中返回并name = ""

要解决该工厂函数可以具有显式displayName参数：

const factory = (..., displayName) => {
  const NewComponent = () => { ... }
  NewComponent.displayName = displayName
  return NewComponent
}

不知道是否有可以简化它的babel插件