如何让UniqueNameError组件根据技能/分类动态切换错误提示文本？

步骤1：修改UniqueNameError组件，新增实体类型参数 #

给组件添加参数区分当前操作的是「技能」还是「分类」，并根据参数动态生成错误文本：

// 定义联合类型约束传入值的合法性
type EntityType = 'skill' | 'category';

export const UniqueNameError = ({ error, entityType }: { error: any; entityType: EntityType }) => {
    const { selectedNodeId, showActionDialog: handleNodeAction } = useTaxonomyContext()
    if (!error) return null
    
    // 根据实体类型生成对应标签文本
    const entityLabel = entityType === 'skill' ? 'Skill' : 'Category';
    
    return (
        <NameErrorContainer>
            <ErrorLabel>{entityLabel} name should be unique,</ErrorLabel>
            <ErrorButton onClick={() => handleNodeAction(selectedNodeId!, ActionType.CREATE_SHORTCUT)}>
                <u>add a shortcut instead?</u>
            </ErrorButton>
        </NameErrorContainer>
    )
}

步骤2：在弹窗组件调用时传入对应类型 #

在技能添加弹窗中，传入entityType="skill"：

return (
    <ActionDialogWrapper
        title={'Add new skill'}
        buttonText="Add"
        disabled={!nodeTitle || error}
        submitAction={() => createNode(nodeTitle, ActionType.CREATE_SKILL, selectedNodeId)}
    >
        <SDialogLabel>to {reactFlowNodesMap[selectedNodeId!]?.data.label}</SDialogLabel>
        <TextField
            id="new-skill-input"
            value={nodeTitle}
            placeholder={'Type Skill Name'}
            label={'New Skill Name'}
            onChange={(e) => setNodeTitle(e.target.value)}
            autoFocus={true}
        />
        {/* 传入skill类型 */}
        {UniqueNameError({ error, entityType: 'skill' })}
    </ActionDialogWrapper>
)

在分类添加弹窗中，传入entityType="category"：

// 分类弹窗示例（结构与技能弹窗一致）
return (
    <ActionDialogWrapper
        title={'Add new category'}
        buttonText="Add"
        disabled={!nodeTitle || error}
        submitAction={() => createNode(nodeTitle, ActionType.CREATE_CATEGORY, selectedNodeId)}
    >
        <SDialogLabel>to {reactFlowNodesMap[selectedNodeId!]?.data.label}</SDialogLabel>
        <TextField
            id="new-category-input"
            value={nodeTitle}
            placeholder={'Type Category Name'}
            label={'New Category Name'}
            onChange={(e) => setNodeTitle(e.target.value)}
            autoFocus={true}
        />
        {/* 传入category类型 */}
        {UniqueNameError({ error, entityType: 'category' })}
    </ActionDialogWrapper>
)

可选优化：用枚举管理实体类型 #

如果项目中频繁使用这类类型，可定义枚举统一管理，避免手写字符串出错：

enum EntityType {
    Skill = 'skill',
    Category = 'category'
}

// 组件参数改为枚举类型
export const UniqueNameError = ({ error, entityType }: { error: any; entityType: EntityType }) => {
    const entityLabel = entityType === EntityType.Skill ? 'Skill' : 'Category';
    // 其余逻辑不变
}

// 调用时使用枚举值
{UniqueNameError({ error, entityType: EntityType.Skill })}

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