具有属性的 JSX 动态标记

Question

我有一个systemStatus组件文件夹。它们通过如下所示的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 的组件，如下所示：

从"反应"导入反应

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>
    );
}

通过<SystemStatus.UserCount {...{name, state}} />加载UserCount组件就可以了。但是，如果我尝试使用CustomTag，则会出现此错误：

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

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

Answer 1

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

试试这个：

const CustomTag = SystemStatus[component];