渲染基於變量組成部分 - reactjs

我想問一下，如果它可以基於變量返回一個組成部分，我的想法，如果這是可能的：渲染基於變量組成部分 - reactjs

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

同樣的，上面我需要手動導入所有將如果else條件放在裏面的頭的。

有沒有辦法有效地做到這一點？

來源

2017-02-21 Sydney Loteria

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

也許這是一個好一點？

來源

2017-02-21 09:58:33 loveky

爲什麼這是公認的答案，它不適用於我，而約翰的答案是 – Eduard

-1

這是我大概會去了解它，導入所有位置成一個組件，做你的邏輯有

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

來源

2017-02-21 09:55:11 ayinloya

兩件事。您應該首先只有一個標題並將它需要的數據傳遞給呈現它需要呈現的內容。我假設頭標可能不會從一個大陸到另一個大陸有太大的不同。其次..他這樣說的方式動態獲取的部件是使用哈希表像這樣

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

那麼你的代碼

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

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

從理論上講，你應該能夠把所有的組件/標題中的元素並使它們可以基於類型進行擴展。該類型是大陸名稱。如果你想有一個更好，更完整的例子，將有很大的幫助，看看你有什麼在你的頭組件目前這樣我就可以看到他們之間的共同點:)

來源

2017-02-21 09:58:05

是啊謝謝男人！我只是按照你的建議，現在看起來這對我很有用。 –

-1

的ECMAScript 6模塊加載器API：

除了爲使用模塊的聲明語法，你可以通過編程方式加載它們，但" ECMAScript 6 module loader API "正在進行的工作。

注：

模塊加載API不是ES6標準的一部分。

模塊加載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尋找主題

來源

2017-02-21 10:18:24

請解釋downvote。添加一些評論。 –

渲染基於變量組成部分 - reactjs

回答

相關問題