操作上选项卡的数量不断增加

Question

这里我试图制作一个选项卡栏，其中选项卡的数量在按下按钮时会增加。选项卡的内容保持不变。我需要什么做什么？

Answer 1

您可以这样做。虽然它在反应中不反应天然，但在两者中几乎相同。

在事件中增加数组的大小，然后
{this.state.tables.map((tab，idx(=>(将为您复制组件。

import React,{Component} from 'react';
import './App.css';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
class App extends Component {
constructor(props){
super(props)
this.state={
tabs:["Tab1"],
}
}
replicate=()=>{
let tabs = this.state.tabs;
tabs.push("Tab2")
this.setState({
tabs
})
}

render() {
return (
<>
<button onClick={this.replicate}> Replicate</button>
<Tabs
value={"tabs"}
indicatorColor="primary"
textColor="primary"
// onChange={handleChange}
aria-label="disabled tabs example"
>
{/* // Here when the action is fired the array increases its size and this map replicate the tab */}
{this.state.tabs.map((tab, idx) => (
<Tab label="Active" />
))}
</Tabs>
</>
);
}
}
export default App;