两件事情。您应该首先只有一个标头并将其传递所需的数据以呈现它需要呈现的内容。我假设标题在一个大陆与另一个大陆之间可能不会有太大不同。其次..据说一种动态获取组件的方法是使用像这样的哈希表

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

那么你的代码

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

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

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

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

也许这更好一点？

这就是我可能会做的事情，将所有位置导入到一个组件中，在那里做你的逻辑

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

ECMAScript 6 module加载器 API：

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

笔记 ：

1. module加载器 API 不是 ES6 标准的一部分。
2. module加载器 API 正在进行中

实现这一目标的方法有：

• 以编程方式使用module
• 配置module加载。

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

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

System.import() 使您能够：

• 在元素中使用module（不支持module语法，请参阅module与脚本部分以了解详细信息）。
• 有条件地加载module。

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

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

还有更多方法可以实现它，请参阅此链接 ECMAScript 6 module加载器 API在 16.5 中查找主题