带有属性的JSX动态标签

Question

我有一个system State组件文件夹。它们用一个index.js文件公开，如下所示：

export UserCount from './UserCount'

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

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的组件，看起来像这样：

从'react'导入React

export default ({
    name,
    state
}) => {
    return (
        <div>
            <div className="col-md-3">{name || 'Name is missing.'}</div>
            <div className="col-md-3">
                {state ? state.count : 0}
            </div>
        </div>
    );
}

通过加载UserCount组件

标签上的未知道具状态。从元素中删除此道具。

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




Answer 1

我认为您只是错误地分配了CustomTag。当您想将其设置为实际组件函数时，您只是将其设置为字符串。

试试这个：

const CustomTag=SystemStatus[组件]