带有属性

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，我会收到此错误：

  

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

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

Answer 1

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

试试这个：

const CustomTag = SystemStatus[component];