reactjs - 在标签点击上显示内容

问题描述

我对 React 很陌生，想显示 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>

    );
 }

标签： reactjsreact-tabs

reactjs - 在标签点击上显示内容 - React

问题描述

解决方案

推荐阅读