带有属性的 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];