Reactjs 在选项卡上显示内容单击-反应

我真的是新的反应，并希望显示2个标签，第一个标签点击应显示画布我有和第二个标签应显示下拉列表。我现在已经把这三个都放在这一页了

我的页面看起来像这样-2个选项卡，一个下拉列表和一个画布

如何在第一个选项卡单击时绑定画布div，并在第二个选项卡单击时显示下拉列表

编辑代码：

export class Graph extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            Vdata: null,
            Edata: null,
            iconData : iconsData,
            currentIndex: 0 
        }
        this._tabClick = this._tabClick.bind(this);
        this.MainGraphComponent = this.MainGraphComponent.bind(this);
        this.CustomizedGraphComponent = this.CustomizedGraphComponent.bind(this);
    }
CustomizedGraphComponent(){
    return(
        <div className={style.container} style={{ width: '100%', paddingTop:20}}>
            <DropdownButton>
                {
                   //elements
                }
            </DropdownButton>
        </div>
    )
}

MainGraphComponent(){
    <div ref={(n) => {
        this.graphContainer = n;
        return;
    }} id="container"
    style={{height: '100%', width: '100%'}}
    />
}

 _tabClick(clickedIndex) {
        const {currentIndex} = this.state.currentIndex;
        if(clickedIndex !== currentIndex) {
            this.setState({currentIndex: clickedIndex })
        }
    }


render (){
 return (

                   <div className={style.container} style={{height: '100%', width: '100%'}}>
            <Tabs
                tabs={[
                    {
                        name: 'Main Graph',
                        title: 'Main Graph',
                        component: <this.MainGraphComponent/>
                    },
                    {
                        name: 'Customized Graph',
                        title: 'Customized Graph',
                        component:<this.CustomizedGraphComponent/>
                    }
                ]}
                onTabClick={this._tabClick}

            />
        </div>

    );
 }

导出类图扩展组件{
建造师（道具）{
超级（道具）；
this.state={
Vdata:null，
Edata:null，
iconData:iconsData，
当前索引：0
}
this.\u tabClick=this.\u tabClick.bind（this）；
this.MainGraphComponent=this.MainGraphComponent.bind（this）；
this.CustomizedGraphComponent=this.CustomizedGraphComponent.bind（this）；
}
自定义EdgraphComponent（）{
返回(
{
//元素
}
)
}
主图形组件（）{
{
this.graphContainer=n；
返回；
}}id=“容器”
样式={{高度：“100%”，宽度：“100%”}
/>
}
_选项卡单击（单击索引）{
const{currentIndex}=this.state.currentIndex；
如果（单击索引！==当前索引）{
this.setState（{currentIndex:clickedIndex}）
}
}
渲染（）{
返回(
);
}
<代码> > P>你考虑使用状态吗？与下拉列表的显示一样，可以将状态值设置为“无”，并在选项卡上单击“设置状态”以更改该值。
过去我使用过选项卡。它真的很容易启动并开始运行，并允许您更改一些功能以满足您的需求，以及根据您的需要对其进行样式设置。默认情况下，它具有选项卡切换功能，但您可以对其进行自定义，以使用本地状态来处理切换，从而获得更多控制。所有关于如何操作的说明都在链接中。
我这样做的方式是根据选项卡的索引呈现所需的组件。此索引保存在状态中，并在每次单击选项卡时更改。
示例代码

<Tabs
    tabs=[
        {
            name: 'Main Graph',
            title: 'Main Graph',
            component: <YourGraphComponent/>
         },
         {
             name: 'Customized Graph',
             title: 'Customized Graph',
             component: <YourCustomizedGraphComponent/>
         }
        ]
        /*
          Assuming Tabs is a component, no need to specify a click handler unless
          you want to add some custom handling.
          onTabClick={this._onSelect}
        */
/>



然后在您的选项卡组件中

this.state={
    currentIndex: 0 //or get the default from the parent
}

_tabClick(clickedIndex) {
    const {currentIndex} = this.state;
    if(clickedIndex !== currentIndex) {
        this.setState({currentIndex: clickedIndex });
    }
}

render() {
  return (<div>
      {/*Basic code to render the tabs and attach click handlers to it based on index*/}
      {this.props.tabs.map((tab, index) => {
        return (<div onClick={this._tabClick.bind(index)}>
            tab.label
        </div>);
      })}
      {/*component fetched from the tabs array based on the current index*/}
      {this.props.tabs[this.state.currentIndex].component}
  </div>);
  }
}

this.state={
currentIndex:0//或从父级获取默认值
}
_选项卡单击（单击索引）{
const{currentIndex}=this.state；
如果（单击索引！==当前索引）{
this.setState（{currentIndex:clickedIndex}）；
}
}
render（）{
返回(
{/*用于呈现选项卡并基于索引将单击处理程序附加到选项卡的基本代码*/}
{this.props.tabs.map（（选项卡，索引）=>{
返回(
标签
);
})}
{/*根据当前索引*/}从选项卡数组中获取的组件
{this.props.tabs[this.state.currentIndex].component}
);
}
}
Hi Saurav-我按照您的建议创建了两个组件，但我不知道如何创建选项卡组件。我添加了经过编辑的答案。请帮助选项卡组件是一个单独的组件或在主返回中？是选项卡是另一个处理单击的组件。所以这个.\u tabClick=this.\u tabClick.bind（this）；将移动到tabs组件，并从graph组件移出。此外，这个定制的组件将类似于常规的react组件，您可以正常地将其传递给tabs组件