React material-ui标签堆叠内容

Question

我已经实现了材料-ui反应标签，如下所示

   <Tabs onChange={(value) => props.changeTabListener(value)} value={props.currentTab} style={styles.tabs}>
    <Tab label="Tab 1" value={props.candidatesTab}>
        <div style={props.currentTab == 0 ? {display:'inline'} : {display:'none'}}>

            <WorksheetTableContainer/>
            <div style={fabStyle}>
                <FloatingActionButton style={iconPadding}>
                    <ContentClear/>
                </FloatingActionButton>
                <FloatingActionButton style={iconPadding}>
                    <ModeEdit/>
                </FloatingActionButton>
                <FloatingActionButton style={iconPadding}>
                    <ContentSave />
                </FloatingActionButton>
                <FloatingActionButton  >
                    <ArrowForward />
                </FloatingActionButton>
            </div>
        </div>
    </Tab>
    <Tab label="Tab 2" value={props.savedTakesTab}>
        <div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>

            <WorksheetTableContainer/>

            <div style={fabStyle}>
                <FloatingActionButton  >
                    <ArrowForward />
                </FloatingActionButton>
            </div>
        </div>

    </Tab>
</Tabs>

适用于material-ui组件。但是，WorksheetTableComponent在第一个选项卡上堆叠自己。即：

如何将内容放在两个单独的标签上？

由于

Answer 1

错误正在发生，因为Tab没有被编程来处理这样的孩子。幸运的是，Tab label属性接受一个节点，因此您甚至可以通过这种方式传递所需的子节点：

<Tab
   value={props.savedTakesTab}
   label={
     <div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>

        <WorksheetTableContainer/>

        <div style={fabStyle}>
            <FloatingActionButton  >
                <ArrowForward />
            </FloatingActionButton>
        </div>
    </div>
   }
 />

如果您仍然需要Tab2标签，则只需在子节点中进行设置即可。希望有所帮助。