基于变量渲染组件 - ReactJS

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

同上，我需要手动导入所有将放置在if else条件中的标头。

有没有一种更加高效的方法来实现这个目标？

- Sydney Loteria

Answer 1

有两点需要注意。首先，您应该只有一个标题，并将所需的数据传递给它以呈现所需的内容。我假设标题在一个大陆与另一个大陆之间可能没有太大的区别。其次...话虽如此，动态获取组件的一种方法是使用哈希表，就像这样：

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

接下来是你的代码

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

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

理论上，您应该能够以某种类型为基础，使标题中的所有组件/元素都可以扩展。该类型就是大洲名称。如果您想要更好或更完整的示例，看一下您当前标题组件中的内容会有所帮助，这样我就可以看到它们之间的共同点 :)

- John Ruddell

---

谢谢啊，老铁！我刚刚按照你的建议去做了，看起来现在应该能行了。 - Sydney Loteria

Answer 2

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

const componentOf = {
 aisa: AsiaHeaderComponent,
 australia: AustraliaHeaderComponent
};

class Home extends React.Component {
    renderHeader(){
     return componentOf[this.props.location]
    }
    render(){
        return (
            { this.renderHeader() }
        )
    }
}

也许这样会更好一点？

- loveky

---

为什么这个被接受的答案对我不起作用，而John的答案却可以？ - Eduard

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

- ayinloya

Answer 4

ECMAScript 6模块加载器API：

除了使用声明性语法来处理模块外，您还可以通过编程方式加载它们，但是"ECMAScript 6模块加载器API"仍在开发中。

注意：

1. 模块加载器API不是ES6标准的一部分。
2. 模块加载器API正在开发中。

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

• 通过编程方式处理模块
• 配置模块加载。

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

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

System.import() 可以让你：

• 在 <script> 元素内使用模块（当模块语法不被支持时，请参考模块与脚本的区别部分）。
• 有条件地加载模块。

System.import() 检索单个模块，你可以使用 Promise.all() 导入多个模块：

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

有几种其他方法可以实现它，请参考此链接 ECMAScript 6模块加载器API，查找16.5主题。

- Sagar Shetty