如何将 displayName 设置为带有备忘录的 React 无状态组件?
How set displayName to a React stateless component with memo?
这是一个无状态组件的实现示例:
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 中显示为匿名组件(突出显示的行):
您可以使用 Object.assign
:
const Create = memo(
Object.assign(props => {
return <div id={props.id}>CREATE TEST</div>;
}, { displayName: 'Create' } )
)
您还可以查看 this issue,如果上述解决方案对您没有帮助,您可以使用任何变通解决方案。
对于 React 中的每个组件,React DevTools 会查找组件本身的 name
或 displayName
属性。
因此,您可以简单地设置 displayName
属性:
export const SomeButton = memo(() => { ... });
SomeButton.displayName = 'SomeButton';
但memo()
本身会从传递的组件中检索名称,因此您也可以使用命名函数表达式而不是箭头函数:
export const SomeButton = memo(function SomeButton() { ... });
这是一个无状态组件的实现示例:
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 中显示为匿名组件(突出显示的行):
您可以使用 Object.assign
:
const Create = memo(
Object.assign(props => {
return <div id={props.id}>CREATE TEST</div>;
}, { displayName: 'Create' } )
)
您还可以查看 this issue,如果上述解决方案对您没有帮助,您可以使用任何变通解决方案。
对于 React 中的每个组件,React DevTools 会查找组件本身的 name
或 displayName
属性。
因此,您可以简单地设置 displayName
属性:
export const SomeButton = memo(() => { ... });
SomeButton.displayName = 'SomeButton';
但memo()
本身会从传递的组件中检索名称,因此您也可以使用命名函数表达式而不是箭头函数:
export const SomeButton = memo(function SomeButton() { ... });