Javascript 需要时导入react组件

我需要你的帮助。我想用react呈现三个选项卡。问题是：我需要按标签的顺序（1、2、0）对标签进行排序。我在app.js中创建了函数getTabsTitlesInOrder（），我想在其中下载所需的文件并将其分配给适当的内容[“tab”]。在这种情况下有没有办法下载文件

已更新

新问题：现在我有一个错误未捕获错误：对象作为React子对象无效（找到：具有键{default}的对象）。如果要渲染子对象集合，请使用数组。请帮助我修复它

我的文件： tabs.json：

{
   "tabs": [
      {
         "title": "tabA",
         "order": 1,
         "path": "./tabA.js",
      },
      {
         "title": "tabB",
         "order": 2,
         "path": "./tabB.js",
      },
      {
         "title": "tabC",
         "order": 0,
         "path": "./tabC.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')
);

tabA.js（tabB.js，tabC.js相同）：

从“React”导入React；
const TabA=createReactClass({
render:function（）{
返回(
选项卡A的内容

);
}
)};
导出默认TabA；

app.js：

{
   "tabs": [
      {
         "title": "tabA",
         "order": 1,
         "path": "./tabA.js",
      },
      {
         "title": "tabB",
         "order": 2,
         "path": "./tabB.js",
      },
      {
         "title": "tabC",
         "order": 0,
         "path": "./tabC.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')
);

const tabsJson=require（'../tabs.json'）；
从“React”导入React；
从“react dom”导入react dom；
类选项卡扩展了React.Component{
render（）{
返回(
{React.Children.map（this.props.Children，（child，i）=>{
返回(
{
this.props.onChange（child.key）；
}}>
{child}
);
})}
);
}
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={active:'tab1'}；
}
render（）{
变量firstTabTitle、secondTabTitle、thirdTabTitle；
var内容={}；
var requireTab=require.context（“./tabs”，true，/^.*\.js$/）；
常量getAbstratitleSinorder=（）=>{
对于（变量i=0；i
{firstTabTitle}
{secondTabTitle}
{thirdTabTitle}
{content[this.state.active]}
);
}
};
ReactDOM.render(
,
document.getElementById（'tab'）
);

---

您正在使用什么构建工具？网页包？汇总？我使用的是Webpack如果您使用的是weback，将“tabs”文件夹上下文化可能是一个解决方案。我插入了var requireTab=require.context（“./tabs”，true，/\.js$/）；。当我通过内容使用它时[“tab1”]=requireTab（tabsJson.tabs[I].path）；它返回一个错误未捕获错误：找不到模块'./tabs/tabA.js'。我们在这里发现了错误。tabs.json中的路径应该是./tabA.js，而不是./tabs/tabA.js您在使用什么构建工具？网页包？汇总？我使用的是Webpack如果您使用的是weback，将“tabs”文件夹上下文化可能是一个解决方案。我插入了var requireTab=require.context（“./tabs”，true，/\.js$/）；。当我通过内容使用它时[“tab1”]=requireTab（tabsJson.tabs[I].path）；它返回一个错误未捕获错误：找不到模块'./tabs/tabA.js'。我们在这里发现了错误。tabs.json中的路径应该是./tabA.js，而不是./tabs/tabA.js