Javascript 带有属性的JSX动态标记

我有一个组件的

systemStatus

文件夹。它们通过一个

index.js

文件公开，如下所示：

export UserCount from './UserCount'

import React from 'react'
import * as SystemStatus from './systemStatus'

export default ({
    name,
    state,
    component
}) => {
    const CustomTag = `SystemStatus.${component}`;
    return (
        <div className="row">
            <SystemStatus.UserCount {...{name, state}} />
            {/*<CustomTag {...{name, state}}/>*/}
        </div>
    );
}

我有一个名为Status的JSX组件，如下所示：

export UserCount from './UserCount'

import React from 'react'
import * as SystemStatus from './systemStatus'

export default ({
    name,
    state,
    component
}) => {
    const CustomTag = `SystemStatus.${component}`;
    return (
        <div className="row">
            <SystemStatus.UserCount {...{name, state}} />
            {/*<CustomTag {...{name, state}}/>*/}
        </div>
    );
}

通过

加载

UserCount

组件工作正常。但是，如果我尝试使用

CustomTag

，则会出现以下错误：

标签上的未知属性

状态

。从元件上拆下此道具

---

如何利用变量传递这些属性？我需要以不同的方式导出它们吗？

我认为您只是错误地分配了

CustomTag

。当您想要将其设置为实际组件函数时，您只是将其设置为字符串

试试这个：

---

const CustomTag=SystemStatus[组件]

您从某处导入了

CustomTag

吗？

CustomTag

是字符串吗？我想这一定是一个组成部分，绝对是正确的答案；非常感谢！我可以在9分钟内接受。