reactjs - 如何使用动态名称渲染 React 组件？

Question

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

!!!假设主题名称是“rounded”

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>
    )
}

另外，我在另一个问题中读到，有人提到有关它的一些内容不能包含在 html 元素中，所以我也尝试了这一点，但没有成功:

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

这两种情况都只是渲染 html 元素，例如(来自控制台检查器):

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

在 react 检查器中:

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

如果它有帮助，React Console 将每个 div 子项显示为:

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

编辑!!!

Import Rounded from ‘./Themes/Rounded’;

万一这里遗漏了......我需要完成的是渲染一个名为 <Rounded /> 的实际 react 组件

编辑2!!!

这是完整的代码(减去任何不相关的内容):

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;

Answer 1

具体操作方法如下!

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;

注意import * as它会自动为您将所有类粘贴到一个数组中。我应该提到的一系列函数。所以现在 Themes[] 是对函数的直接引用，而不仅仅是字符串。