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

Posted

技术标签:

【中文标题】在材质 UI 中动态更改选项卡内容【英文标题】:Change tab content dynamically in material UI 【发布时间】:2017-02-05 00:58:03 【问题描述】:

我的反应应用程序页面中有一个包含选项卡(材料 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 作为选项卡“标签”的视图传递。每当我单击 listitem 时,我希望此视图发生变化。我想替换“标签列表” 每当单击任何列表项时,组件与另一个组件“组件 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>

        );

每次单击列表项时,我都想用另一个组件替换它。路由器在这里有用吗?

【问题讨论】:

【参考方案1】:

标签有一个属性和值

value=this.state.value
onChange=this.handleChange

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

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

然后您的 handlechange 函数将切换到您想要的任何选项卡。

【讨论】:

我可以在标签之间切换。但我想更改选项卡中的内容。正如我所说,我的标签中有列表视图。当我单击一个列表项时,我希望该列表视图消失,并在同一个选项卡中显示另一个内容。 你可能需要 react-router 来处理它。将 Link 属性添加到列表项,并制作选项卡 this.props.children 的内容,然后将内容与路由匹配。我做过类似的事情 我正在编辑我的代码。请查看并告诉我何时应该进行更改。 我一直没能解决。有人可以帮我吗

以上是关于在材质 UI 中动态更改选项卡内容的主要内容,如果未能解决你的问题,请参考以下文章

JSF - tabView 中的动态选项卡数量,具有动态选项卡内容

如何使用 Tab 键激活引导选项卡内容

以角度切换选项卡时保持选项卡状态

选项卡内容布局显示在其他选项卡中

QTabView 隐藏选项卡内容但不隐藏选项卡栏

QTabWidget 在选项卡上设置掩码(不是选项卡内容)