Javascript 如何在react js应用程序中添加选项卡组件并在选项卡中加载页面？

我有一个react js应用程序，我正在开发。我创建了一个myfirstcomponent，它调用RESTAPI并显示一些json数据。现在我想扩展我的应用程序并添加更多组件，比如mySecondComponent。但是我想让它成为这样，我为它创建选项卡。因此，我研究并基于教程，创建了一个选项卡和一个选项卡组件。现在，我想在app.js文件中修改我的render方法，这样我就可以在tab组件中呈现我的组件。因此，我尝试了以下操作，在app div中添加了Tabs和Tab组件，现在我需要基于所选选项卡显示/隐藏组件。我是一个新的反应，所以，我想确保我朝着正确的方向前进。在reactjs中这样做是否正确

render() {
  return (
    <div className="app">
      <Tabs tabs={['first', 'second']} selected={ this.state.selected } 
        setSelected={ this.setSelected }>
          <Tab isSelected={ this.state.selected === 'first' }></Tab>
          <Tab isSelected={ this.state.selected === 'second' }></Tab>
        </Tabs>
        <myfirstcomponent className="compnent"/>
        <mySecondcomponent className="compnent"/>
      </div>
    );
  }

render（）{
返回(
);
}

app.js文件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <myfirstcomponent className="App-com"/>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

标签

从“React”导入React；
类选项卡扩展了React.Component{
render（）{
返回(

{
this.props.tabs.map（tab=>{
const active=（tab==this.props.selected？'active'：''；
返回(

this.props.setSelected（选项卡）}>
{tab}

);
})
}

{this.props.children}
);
}
}
导出默认选项卡；

Tab.js

import React from 'react';
class Tab extends React.Component {
  render() {
    if (this.props.isSelected) {
      return (
        <div>
          { this.props.children }
        </div>
      );
    }
    return null;
  }
}
export default Tab;

从“React”导入React；
类选项卡扩展了React.Component{
render（）{
如果（本道具被选中）{
返回(
{this.props.children}
);
}
返回null；
}
}
导出默认选项卡；

我认为这种方法不正确。您应该在选项卡组件内使用布线和到布线的链接。Pluralsight网站提供了一个很好的例子，说明了如何实现您想要做的事情。

---

我认为这种方法不正确。您应该在选项卡组件内使用布线和到布线的链接。Pluralsight网站提供了一个很好的例子，说明了如何实现您想要做的事情。

---

注意：这可能不是您问题的确切答案

我认为可以使用材质ui创建选项卡组件。 下面是一个很好的代码示例

---

而且如果你是新的反应。我鼓励学习/编写功能组件，而不是基于类的组件。因为在基于类的组件中，状态管理和带有“this”关键字的道具非常混乱。

注意：这可能不是您问题的确切答案

我认为可以使用材质ui创建选项卡组件。 下面是一个很好的代码示例

而且如果你是新的反应。我鼓励学习/编写功能组件，而不是基于类的组件。因为在基于类的组件中，状态管理和带有“this”关键字的道具非常混乱

import React from 'react';
class Tab extends React.Component {
  render() {
    if (this.props.isSelected) {
      return (
        <div>
          { this.props.children }
        </div>
      );
    }
    return null;
  }
}
export default Tab;