Question

我有一个工厂，我想要产生反应组件。现在我有Load和Migrate。直接传递导入的名称可以正常工作：

...

return React.createElement(Migrate, {
    node: node,
    diagramEngine: diagramEngine
});

但我想动态插入名称。

...    

var ElementToCreate = node.state.manipulator.name;

return React.createElement(ElementToCreate, {
    node: node,
    diagramEngine: diagramEngine
});

但是这会出现错误消息：

警告：标记上的未知道具node，diagramEngine。从元素中删除这些道具

传递原始字符串“Migrate”或“Load”也会失败。根据提示here无法帮助我确定问题。有什么想法吗？

Answer 1

如果传入一个字符串作为React.createElement的第一个参数，它将被视为HTML标记名称，这不是您想要的。

相反，使用注册表从名称映射到实际的组件类：

import Foo from './Foo';
import Bar from './Bar';
import Quux from './Quux';

const TYPE_REGISTRY = {
    // Using ES object literal shorthand to
    // avoid repeating the names
    Bar,
    Foo,
    Quux,
};

// ...

class ... {

    render() {
        // typeName would be one of "Bar", "Foo" or "Quux".
        const typeName = node.state.manipulator.name;
        const element = TYPE_REGISTRY[typeName];
        if(!element) {
            return <div>Invalid type name {typeName}</div>;
        }
        return React.createElement(element, {node, diagramEngine});
    }
}

Answer 2

见AKX答案。为了理智，因为我将有大量的导入，我也把它全部移动到它自己的文件。

import Load from "./Load";
import Migrate from "./Migrate";
...

const AllManipulators = {
    Load,
    Migrate
    ...
};

export default AllManipulators;

然后

import AllManipulators from "./AllManipulators"
return React.createElement(AllManipulators[name], {
    node: node,
    diagramEngine: diagramEngine
});

无法从字符串创建react元素

2 个答案: