How to set displayName in a functional component [ React ]

React 函数组件（Function Components）通常是通过函数名称自动获得它们的 displayName。但是在某些情况下，你可能需要手动设置或修改这个值，特别是在使用高阶组件（HOC）或类似情况下，这有助于更好地在开发者工具中识别组件。

为了在函数组件中手动设置 displayName，你可以如下操作：

jsx
// 定义你的函数组件
const MyComponent = () => {
  // 组件逻辑
  return <div>Some content</div>;
};

// 手动设置 displayName
MyComponent.displayName = 'CustomDisplayName';

export default MyComponent;

在上面的示例中，即使组件的名字是 MyComponent，在 React 开发者工具中显示的名字将会是 CustomDisplayName。

当你使用组件表达式或者是将组件导出为其他组件的属性时，设置 displayName 尤其有用。例如：

jsx
const SomeLibrary = {
  // ...
};

SomeLibrary.MyComponent = () => {
  return <div>Library content</div>;
};

SomeLibrary.MyComponent.displayName = 'SomeLibrary.MyComponent';

export { SomeLibrary };

在这个示例中，我们给 SomeLibrary 对象的 MyComponent 属性设置了一个 displayName，它可以帮助开发者在使用该库的组件时更清晰地识别组件层级关系。