如何以编程方式从 Material UI 在 Tab 中设置活动选项卡

Question

我正在使用 Material UI 和 React，我正在以编程方式创建多个选项卡，如下所示：

return (
    <div>
        <Tabs>
            {this.state.elements.map(elem => {
                return (
                    <Tab key={elem.elemID} label={elem.name} >
                        <div>
                           // rest removed for brevity
                        </div>
                    </Tab>
                )
            })}
        </Tabs>
    </div>
);

这有效，并且显示了选项卡，但问题是默认情况下，当组件呈现时，第一个选项卡是活动选项卡。然而，我想根据从 props 获得的 id 值以编程方式设置活动选项卡。所以基本上，如果this.props.selectedID === elem.elemID我希望该选项卡在组件呈现时成为活动选项卡。当然，一旦组件被渲染，用户应该可以自由点击和在选项卡之间切换。知道如何实现它吗？

Answer 1

使用和value属性使其成为受控组件：TabsTab

<Tabs value={this.props.selectedID}>
    {this.state.elements.map(elem => {
            return (
                <Tab key={elem.elemID} label={elem.name} value={elem.elemID}>
                    <div>
                       // rest removed for brevity
                    </div>
                </Tab>
            )
        })}
</Tabs>