javascript - 具有属性的 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 的组件看起来像这样:

从'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组件通过 <SystemStatus.UserCount {...{name, state}} />工作得很好。但是，如果我尝试使用 CustomTag我收到此错误:

Unknown prop state on tag. Remove this prop from the element.

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

Answer 1

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

试试这个:

const CustomTag = SystemStatus[组件];