変数に基づいてコンポーネントをレンダリングし、私の考えはこれが可能であれば

Question

が、私は変数に基づいてコンポーネントを返すためにその可能ならば、お願いしたいと思いreactjsすべてのコンポーネントを手動で個別にインポートします。私は手動で他の条件ならば内部置かれるヘッダーのすべてをインポートする必要があり、上記と同じ

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

2つのことを使用することができ、おそらく、一つの成分の中にすべての場所をインポートし、それについて移動があなたのロジックにしてください方法です。最初にヘッダーを1つだけ作成し、レンダリングに必要なデータをレンダリングする必要があります。ヘッダーはおそらく大陸とは大きく異なるものではないと私は推測している。第二に...ということでは、コンポーネントを動的に取得する方法は、あなたのすべてのコンポーネントを取ることができるはず

理論的には

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

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

ので

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

、あなたのコードのようにハッシュテーブルを使用することであると述べました/要素をヘッダーに追加し、型に基づいて拡張可能にします。そのタイプは大陸名です。あなたがより良い以上の完全な例をしたい場合には、多分これは現在ので、私はそれらの間の共通点:)

Answer 4

のECMAScript 6モジュールローダのAPI：別に宣言構文から

モジュールで作業するためのあなたは、プログラムでそれらを読み込むことができますが、" ECMAScript 6 module loader API "は進行中の作業です。

注：

1. モジュールローダのAPIはES6標準の一部ではありません。
2. モジュールローダのAPIは、進行中の作業である

あなたがこれを達成することができます方法は以下のとおりです。

• は、プログラムモジュール
• 設定モジュールのロードで動作します。

あなたは、プログラムの約束に基づいて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