Рендер компонент, основанный на переменной - 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() } 
     ) 
    } 
} 

То же самое с выше мне нужно вручную импортировать все из заголовка, который будет введен внутрь, если другое условие.

Есть ли способ эффективно сделать это?

Answer 1

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

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

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

может быть, это немного лучше?

Answer 2

Это, как я бы, вероятно, идет о нем, импортировать все места в один компонент, сделать вашу логику там

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 3

Две вещи , вы должны сначала иметь только один заголовок и передать ему данные, необходимые для визуализации того, что ему нужно сделать. Я предполагаю, что заголовок, вероятно, не будет сильно отличаться от одного континента к другому. Во-вторых .. Это сказанное способ динамического получения компонентов заключается в использовании хэш-таблицы, как так

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

затем код

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

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

В теории вы должны быть в состоянии принять всех компонентов/элементов в заголовке и сделать их расширяемыми на основе типа. этот тип является континентом. Если вы хотите лучше или более полный примера это помогло бы много, чтобы увидеть, что у вас есть в компоненте заголовка в настоящее время, так что я могу видеть сходства между ними :)

Answer 4

ECMAScript 6 Модуль загрузчика API:

Помимо декларативного синтаксиса для работы с модулями, вы можете загрузить их программно, но " ECMAScript 6 module loader API " работа продолжается.

Примечание:

1. Модуль загрузчика API не является частью стандарта ES6.
2. Модуля загрузчик API является незавершенным

Пути вы можете достичь этого:

• Программного работать с модулями
• Настройки загрузка модуля.

Вы можете программно импортировать модуль, с помощью API на основе Promises:

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