如何将 displayName 设置为带有备忘录的 React 无状态组件？

Question

这是一个无状态组件的实现示例：

import React, { memo } from 'react';

const Create = memo(props => {
    return <div id={props.id}>CREATE TEST</div>;
});

Create.displayName = "Create";

export default Create;

在 Chrome 上的 React Developer Tools 中显示为匿名组件（突出显示的行）：

Answer 1

您可以使用 Object.assign:

const Create = memo(
  Object.assign(props => {
    return <div id={props.id}>CREATE TEST</div>;
  }, { displayName: 'Create' } )
)

您还可以查看 this issue，如果上述解决方案对您没有帮助，您可以使用任何变通解决方案。

Answer 2

对于 React 中的每个组件，React DevTools 会查找组件本身的 name 或 displayName 属性。

因此，您可以简单地设置 displayName 属性:

export const SomeButton = memo(() => { ... });
SomeButton.displayName = 'SomeButton';

但memo()本身会从传递的组件中检索名称，因此您也可以使用命名函数表达式而不是箭头函数：

export const SomeButton = memo(function SomeButton() { ... });

如何将 displayName 设置为带有备忘录的 React 无状态组件？

How set displayName to a React stateless component with memo?

reactjs

memo