Question

我想问一下，如果可以根据变量返回一个组件，我的想法是否可行：

var location = this.props.location // Eg. Asia,Australia
<location+"HeaderComponent" />

我的问题是我需要单独手动导入我的所有组件。

这是我的其他脚本：

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

class Home extends React.Component {
    renderHeader(){
        if(this.props.location == "Asia"){
            return (
                <AsiaHeaderComponent />
            );
        }
        else if(this.props.location == "Australia"){
            return (
                <AustraliaHeaderComponent />
            );
        }
    }
    render(){
        return (
            { this.renderHeader() }
        )
    }
}

与上面相同，我需要手动导入所有将放入其中的标题，如果是其他条件。

有没有办法有效地做到这一点？

Answer 1

两件事。你应该首先只有一个标题，并传递它需要渲染它需要渲染的数据。我假设从一个大陆到另一个大陆，标题可能不会有太大的不同。其次..据说一种动态获取组件的方法是使用像这样的哈希表

const headerLookup = {
    asia: AsiaHeaderComponent,
    australia: AustraliaHeaderComponent
    .... more here
}

然后你的代码

render() {
    const Header = headerLookup[this.props.location.toLowerCase()]

    return (
        <Header {...someprops} />
    );
}

理论上，您应该能够在标题中获取所有组件/元素，并使它们可以根据类型进行扩展。那种类型是大陆名称。如果你想要一个更好或更完整的例子，那么在你的标题组件中看到你的内容会有很大帮助，所以我可以看到它们之间的共性：）

Answer 2

＆＃13;

public Date compareDate(Date Kred_Deb_Date, Date Book_Date) {
    Date date1 = null;
    if (Book_Date.compareTo(Kred_Deb_Date) < 0) {
        date1 = get_book_date();
        compareDate(Kred_Deb_Date, date1);
    } else if (Book_Date.compareTo(Kred_Deb_Date) > 0) {
        date1 = Book_Date;
    }
    return date1;    
}

＆＃13;

也许这有点好一点？

Answer 3

我可能会这样做，将所有位置导入一个组件，在那里做你的逻辑

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

class Home extends React.Component {

    render() {
        const {continent} = this.props;


        return (
            <div>
                {continent == 'Asia' ?
                     <AsiaHeaderComponent { ...this.props} />:null
                }
                {location == 'Australia' ?
                     <AustraliaHeaderComponent { ...this.props}  />:null
                }

            </div>
        );
    }
}

export default Home

然后您可以导入位置并使用它

import Home from "components/Home.jsx";

class SomeComponent extends React.Component {

    render(){
        return (
            <Home { ...this.props} location={SomeLocation} />
        )
    }
}

Answer 4

ECMAScript 6模块加载器API ：

除了使用模块的声明性语法之外，您可以通过编程方式加载它们，但" ECMAScript 6 module loader API "正在进行中。

注意：


模块加载器API不是ES6标准的一部分。

模块加载器API正在进行中

您可以通过以下方式实现：

以编程方式使用模块
配置模块加载。

您可以通过基于Promises的API以编程方式导入模块：

  System.import('some_module')
    .then(some_module => {
        // Use some_module
    })
    .catch(error => {
        ···
    });

System.import（）使您能够：

在元素内部使用模块（模块语法不是支持，请参阅有关模块与脚本的部分详情）。
有条件地加载模块。

System.import（）检索单个模块，您可以使用Promise.all（）导入几个模块：

Promise.all(
    ['module1', 'module2', 'module3']
    .map(x => System.import(x)))
.then(([module1, module2, module3]) => {
    // Use module1, module2, module3
});

实现它的方法还有很多，请参考此链接 ECMAScript 6 module loader API寻找16.5的主题

基于变量渲染组件 - reactjs

4 个答案: