在需要时导入反应组件

Question

I need your help. I want to render three tabs with react. The question is: I need to sort tabs by their orders (1, 2, 0). I've created function getTabsTitlesInOrder() in app.js where I want to download needed file and to assign it to appropriate content["tab"]. Are there any ways to download files in such case?

UPDATED

New problem: Now I have an error Uncaught Error: Objects are not valid as a React child (found: object with keys {default}). If you meant to render a collection of children, use an array instead. Help me pls to fix it!

My files: 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 are the same):

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')
...