在 Material UI 中动态更改选项卡内容

Question

我的 React 应用程序页面中有一个包含选项卡（material ui）的 div。它有两个选项卡。其中一个选项卡具有列表视图 (material-ui)。我想要一种行为，当我单击列表视图的任何列表项时，我的选项卡内容应该淡出（或隐藏或更改）列表视图，并为我的选项卡提供另一个视图。我怎样才能实现这个目标。

return (
            <MuiThemeProvider>
                <div className="videoPageTabs">
                    <Tabs>
                        <Tab label="Tags" style={{backgroundColor:"#293C8E"}}>
                            <TagList/>
                        </Tab>   

ListItems 组件“TagList”

return (
            <div>
                <List id="parent-list-tags" >
                    <ListItem  primaryText="Item 1" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Item 2" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Item 3" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Item 4" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Item 5" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Item 6" onClick={this.handleClicked} />
                </List>

            </div>

“选项卡组件”。 您可以看到我将 Taglist 作为选项卡“标签”的视图传递。我希望每当我单击列表项时此视图都会更改。我想替换“标签列表” 每当单击任何列表项时，组件都会与另一个组件“组件 A”一起使用。

return (
            <MuiThemeProvider>
                <div className="videoPageTabs">
                    <Tabs>
                        <Tab label="Tags" style={{backgroundColor:"#293C8E"}}>
                            <TagList/>
                        </Tab>
                        <Tab label="Info" style={{backgroundColor:"#293C8E"}}>
                            <div>
                                <h3 style={styles.headline}>Title : Name</h3>


                            </div>
                        </Tab>
                    </Tabs>

                </div>
            </MuiThemeProvider>

        );

每次单击列表项时，我都想将其替换为另一个组件。路由器在这里有用吗？

Answer 1

选项卡有一个 prop 和值

value={this.state.value}
onChange={this.handleChange}

因此您需要为所有选项卡分配值：

 <Tab label="Tags" value="tags" >

然后你的handlechange函数就会切换到你想要的任何选项卡。