在<tab>

时间:2018-10-01 04:43:30

标签: reactjs material-ui

使用material-ui,我试图迭代一个数组并将一个项值呈现为选项卡。我想按照此示例https://material-ui.com/utils/transitions/#grow使标签页在加载时增加。

我能够有效地进行迭代并按如下所示显示选项卡;

 <Tabs fullWidth value={value} onChange={this.handleChange} scrollable>
 {this.props.myArray.map((p, i) =>
     <Tab value={p.value} label={`${p.value}`}/>)}
 </Tabs>

逻辑方法是;

<Tabs fullWidth value={value} onChange={this.handleChange} scrollable>
{this.props.myArray.map((p, i) =>
    <Grow in={true} timeout={500}
        <Tab value={p.value} label={`${p.value}`}/>
    </Grow>)}
</Tabs>

但是这不起作用,“ p”变得不可访问,并且不应用“增长”效果。

我最好的选择是使用Tab源并创建自己的组件来实现此处https://reactcommunity.org/react-transition-group/transition所述的转换吗? 我很高兴这样做,但是如果有一个简单的解决方案,显然会更喜欢上面的方法。

谢谢!

0 个答案:

没有答案