必要に応じて反応成分をインポート

Question

私はあなたの助けが必要です。私は反応がある3つのタブを描画したい。質問は次のとおりです。注文（1、2、0）でタブを並べ替える必要があります。私は関数を作成しましたgetTabsTitlesInOrder（）にapp.js私は必要なファイルをダウンロードし、適切なコンテンツ["タブ"]に割り当てたいと思います。そのような場合にファイルをダウンロードする方法はありますか？

が

新しい問題を更新：今、私はエラーに不明なエラーを持っている：オブジェクトは、（：キー{デフォルト}を持つオブジェクトを見つけた）子供に反応として有効ではありません。子供のコレクションをレンダリングする場合は、代わりに配列を使用します。私はそれを修正するplsを助ける！

マイファイル： tabs.json：

{ 
    "tabs": [ 
     { 
     "title": "tabA", 
     "order": 1, 
     "path": "./tabA.js", 
     }, 
     { 
     "title": "tabB", 
     "order": 2, 
     "path": "./tabB.js", 
     }, 
     { 
     "title": "tabC", 
     "order": 0, 
     "path": "./tabC.js", 
     }, 
    ] 
} 

tabA.js（tabB.js、tabC.jsが同じである）：

import React from 'react'; 

const TabA = createReactClass({ 
    render: function(){ 
     return(
     <div className="tabAContent"> 
      <p>Content of Tab A</p> 
     </div> 
    ); 
    } 
)}; 

export default TabA; 

app.js：

const tabsJson = require('../tabs.json'); 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Tabs extends React.Component{ 
    render(){ 
     return(
      <div className="tabs"> 
       {React.Children.map(this.props.children, (child, i) => { 
        return(
         <div 
          className={"tabTitle " + (child.key === this.props.active ? "tabTitleActive" 
             : " ")} 
          onClick={() => { 
           this.props.onChange(child.key); 
          }}> 
          {child} 
         </div> 
        ); 
       })} 
      </div> 
     ); 
    } 
}; 


class App extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = {active: 'tab1'}; 
    } 

    render() { 
     var firstTabTitle, secondTabTitle, thirdTabTitle; 
     var content = {}; 

     var requireTab = require.context("./tabs", true, /^.*\.js$/); 

     const getTabsTitlesInOrder =() => { 
      for(var i = 0; i < tabsJson.tabs.length; i ++){ 
       switch (tabsJson.tabs[i].order){ 
        case 0: 
         firstTabTitle = tabsJson.tabs[i].title; 

         content["tab1"] = 
           requireTab(tabsJson.tabs[i].path); 

         break; 
        case 1: 
         secondTabTitle = tabsJson.tabs[i].title; 

         content["tab2"] = 
           requireTab(tabsJson.tabs[i].path); 

         break; 
        case 2: 
         thirdTabTitle = tabsJson.tabs[i].title; 

         content["tab3"] = 
           requireTab(tabsJson.tabs[i].path); 

         break; 
       } 
      } 
      getTabsContentInOrder (firstTabTitle, secondTabTitle, thirdTabTitle); 
     }; 

     return(
      <div> 
       <div className="tabButtons"> 
        <Tabs 
         active = {this.state.active} 
         onChange = {active => this.setState({active})} 
        > 
         <div key="tab1">{firstTabTitle}</div> 
         <div key="tab2">{secondTabTitle}</div> 
         <div key="tab3">{thirdTabTitle}</div> 
        </Tabs> 
       </div> 
       <div className="tabContent">{content[this.state.active]}</div> 
      </div> 
     ); 
    } 
}; 

ReactDOM.render(
    <App />, 
    document.getElementById('tab') 
); 

Answer 1

https://webpack.js.org/guides/dependency-management/#require-context

var requireTab = require.context("./tabs", true, /^tab[A-Z]\.js$/); 
... 
if (tab === 'A') { 
    const content = requireTab('tabA') 
...