Question

这是我尝试过的，它所做的只是插入带有主题值的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>
    )
}

另外，我在另一个问题中读到有人提到它的某些内容无法包含在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 Inspector中：

<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 />的实际反应组件

编辑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[]是对函数的直接引用，而不仅仅是字符串。

如何使用动态名称渲染反应组件？

1 个答案: