如何多次导入同一React组件并为其设置不同的displayName

问题根源 #

你通过import {Button as Btn, Button as MyBtn}导入的两个重命名组件，本质是对同一个组件对象的引用，起别名不会生成新的独立组件实例。所以你两次修改displayName都是在修改同一个对象的属性，最终只会保留最后一次的赋值结果。

解决方案 #

要实现不同的displayName，你需要生成两个完全独立的组件实例，有以下两种常用实现方式：

方案1：手动包裹生成独立组件 #

直接定义新的组件透传原Button的所有属性，生成独立实例后分别设置displayName，适合需要少量重命名组件的场景：

import { Button } from 'design-system';

export const Btn = (props) => <Button {...props} />;
Btn.displayName = 'Btn';

export const MyBtn = (props) => <Button {...props} />;
MyBtn.displayName = 'MyBtn';

如果需要批量生成多个重命名组件，可以封装通用的包裹函数：

import { Button } from 'design-system';

const wrapButton = (Component) => (props) => <Component {...props} />;

const Btn = wrapButton(Button);
Btn.displayName = 'Btn';
const MyBtn = wrapButton(Button);
MyBtn.displayName = 'MyBtn';

方案2：使用React内置API生成独立实例 #

如果你需要组件缓存能力，也可以用React.memo包裹原组件，天然会生成新的独立实例：

import { Button } from 'design-system';
import { memo } from 'react';

const Btn = memo(Button);
Btn.displayName = 'Btn';

const MyBtn = memo(Button);
MyBtn.displayName = 'MyBtn';

如果你使用TypeScript，可以为包裹函数增加泛型保证类型和原Button完全一致：

import type { ComponentType } from 'react';
import { Button, type ButtonProps } from 'design-system';

const wrapButton = <P extends object>(Component: ComponentType<P>) => (props: P) => <Component {...props} />;

const Btn = wrapButton<ButtonProps>(Button);
Btn.displayName = 'Btn';

内容的提问来源于stack exchange，提问作者Ale TheFe