reactjs - 基于变量的渲染组件 - 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 条件中的 header 。

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

Answer 1

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

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

然后是你的代码

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

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

理论上，您应该能够获取 header 中的所有组件/元素，并使它们可以基于类型进行扩展。该类型是大陆名称。如果您想要一个更好或更完整的示例，那么了解当前 header 组件中的内容将会有很大帮助，这样我就可以看到它们之间的共性:)