Reactjs 如何使用动态名称渲染react组件？

下面是我尝试过的，它所做的只是插入带有主题值作为标记的html。它不会创建实际的React组件

！！！让我们假设主题名为“四舍五入”

renderTemplate(){
    const store = JSON.parse(localStorage.getItem('store'));
    const template = this.state.product.template;
    const Theme = `${template.charAt(0).toUpperCase()}${template.slice(1)}`;
    return <Theme store={this.props.store} product={this.state.product} />;
}

render(){
    return (
        <div>
            { _.isEmpty(this.state.product) ?
                'LOADING'
                :
                this.renderTemplate()
            }
        </div>
    )
}

编辑

Import Rounded from ‘./Themes/Rounded’;

万一在这里漏掉了。。。我需要完成的是呈现一个名为

编辑2

以下是完整的代码（减去任何不相关的代码）：

从“React”导入React；
从“react dom”导入react dom；
//导入主题
进口{
四舍五入，
广场
[此处为其他主题]
}来自“./主题”；
类MyClass扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
产品：{}
};
}
renderTemplate（）{
const template=this.state.product.template；
const Theme=`${template.charAt（0.toUpperCase（）}${template.slice（1）}`；
返回；
}
render（）{
返回(
_.isEmpty（此.state.product）？
加载
:
this.renderTemplate（）
)
}
}
导出默认MyClass；

以下是您的操作方法

import React from 'react';
import ReactDOM from 'react-dom';

// IMPORT THEMES
import * as Themes from './Themes';

class MyClass extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            product: {}
        };
    }

    renderTemplate(){
        const template = this.state.product.template;
        const Theme = Themes[template.charAt(0).toUpperCase() + template.slice(1)];
        return <Theme product={this.state.product} />;
    }

    render(){
        return (
            _.isEmpty(this.state.product) ?
                <div>LOADING</div>
                :
                this.renderTemplate()
        )
    }
}

export default MyClass;

从“React”导入React；
从“react dom”导入react dom；
//导入主题
将*作为主题从“/Themes”导入；
类MyClass扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
产品：{}
};
}
renderTemplate（）{
const template=this.state.product.template；
const Theme=Themes[template.charAt（0.toUpperCase（）+template.slice（1）]；
返回；
}
render（）{
返回(
_.isEmpty（此.state.product）？
加载
:
this.renderTemplate（）
)
}
}
导出默认MyClass；

---

请注意，

import*as

，它会自动将所有类粘贴到一个数组中。我应该提到的一系列函数。所以现在

Themes[]

是对函数的直接引用，而不仅仅是一个字符串。

你是想把

react-rounded

作为标记名吗？不，我需要将一个组件呈现为“四舍五入”，我编辑了这个问题，希望能更清楚地反映这一点。React inspector实际上显示了

组件，那么您的问题是什么？@Tomas this code

this.state.product.template.charAt（0）.toUpperCase（）

在我的脑海中只会返回一个按钮。你试过

Theme=template.charAt（0.toUpperCase+template.slice（1）

了吗？

<div class="row">
    <Rounded store="XXXXX" product="XXXXX"></Rounded>
    <Rounded store="XXXXX" product="XXXXX"></Rounded>
    <Rounded store="XXXXX" product="XXXXX"></Rounded>
</div>

$$typeof: Symbol(react.element)
    Empty object

Import Rounded from ‘./Themes/Rounded’;

import React from 'react';
import ReactDOM from 'react-dom';

// IMPORT THEMES
import {
    Rounded,
    Square,
    [Other themes here]
} from './Themes';

class MyClass extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            product: {}
        };
    }

    renderTemplate(){
        const template = this.state.product.template;
        const Theme = `${template.charAt(0).toUpperCase()}${template.slice(1)}`;
        return <Theme product={this.state.product} />;
    }

    render(){
        return (
            _.isEmpty(this.state.product) ?
                <div>LOADING</div>
                :
                this.renderTemplate()
        )
    }
}

export default MyClass;

import React from 'react';
import ReactDOM from 'react-dom';

// IMPORT THEMES
import * as Themes from './Themes';

class MyClass extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            product: {}
        };
    }

    renderTemplate(){
        const template = this.state.product.template;
        const Theme = Themes[template.charAt(0).toUpperCase() + template.slice(1)];
        return <Theme product={this.state.product} />;
    }

    render(){
        return (
            _.isEmpty(this.state.product) ?
                <div>LOADING</div>
                :
                this.renderTemplate()
        )
    }
}

export default MyClass;