Reactjs 如何以编程方式在物料界面的选项卡中设置活动选项卡

我正在使用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>
);

返回(
{this.state.elements.map（elem=>{
返回(
//为简洁起见，去掉其余部分
)
})}
);

---

这会起作用，并且会显示选项卡，但问题是默认情况下，当组件渲染时，第一个选项卡是活动选项卡。然而，我想根据从道具获得的id值以编程方式设置活动选项卡。因此，基本上，如果

this.props.selectedID==elem.elemID

，那么我希望该选项卡在组件渲染时成为活动选项卡。当然，渲染组件后，用户应该可以自由单击并在选项卡之间切换。知道如何实现它吗？

使用

选项卡上的
值
道具和
选项卡
使其成为受控组件：

<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>

const initialTabIndex= 0;
const [value, setValue] = React.useState(initialTabIndex);


{this.state.elements.map（elem=>{
返回(
//为简洁起见，去掉其余部分
)
})}
TL-DR
假设您试图将其映射到URL，这里的技巧是通过编程将
的“value”属性设置为URL当前拥有的属性。我假设你正在使用

示例：

const baseUrls = ['', 'online-manga-reader', 'admin'];

class TabBar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: this.processPathName(),
    };
  }

  processPathName(){
    const path = this.props.location.pathname.split('/')[1];
    const value =  baseUrls.indexOf(path);
    return value !== -1 ? value : 0; // This is the default one.
  }

  handleChange = (event, value) => {
    this.setState({ value });
    this.returnTabContainer(value);
  }

  returnTabContainer(value) {

    switch (value) {
      case 1:
        this.props.history.push('/online-manga-reader');
        break;
      case 2:
        this.props.history.push('/admin/article');
        break;
      default:
        this.props.history.push('/');
    }
  }

  returnTabAdmin() {
    return this.props.isAdmin ? <Tab label="Admin Tab" /> : '';
  }

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs 
            value={value} 
            onChange={(evt, val) => {this.handleChange(evt, val); }}
          >
            <Tab label="Home" />
            <Tab label="Online Manga Reader" />
            {this.returnTabAdmin()}
          </Tabs>
          <LoginButton />
        </AppBar>
      </div>
    );
  }
}
export default connect(mapStateToProps)(withStyles(styles)(withRouter(TabBar)));

这是一个位于类之外的数组，它保存URL（或基URL）的第一个路径：

这将匹配基本URL（因此将选择第一个）

这一个，第二个会匹配








第三条：
-  
-

我在这里使用的“技巧”在于
processPathName（）
方法。
它从React Router读取当前URL，然后调用拆分，该拆分已将URL解析为所需的部分：

http://example.com/admin/article/create 

将转化为：

/
管理员
文章
创建

总是让我们回到我们要找的位置（这是一个从分割中得到的位置）

这样，我们就可以使用好的ol'indexOf在数组中搜索路径。如果找到它，它将返回与标签位置匹配的数字。这就是为什么它们的顺序相同很重要

如果它没有找到它，我们将设置一个默认值（在本例中，我们将其设置为零，这说明了主页）

您的项目应该正常呈现，没有任何问题。
以下是我的答案，作为一个带有挂钩的最小通用示例。我还假设您正在使用React路由器。它本质上将url状态链接到选项卡的“可选择性”（在更改和呈现时）：

const-NavTabs=（{history，location}）=>{
函数getInitialTab（）{
开关（真）{
case/\/componentone/.test（location.pathname）：
返回0
case/\/componenttwo/.test（location.pathname）：
返回1
违约：
返回0
}
}
const[value，setValue]=useState（getInitialTab（））
函数句柄更改（事件，val）{
设定值（val）
开关（val）{
案例0：
history.push（“/componentone”）
打破
案例1：
history.push（“/componenttwo”）
打破
违约：
打破
}
}
返回(
{value===0&&(
)}
{value===1&&(
)}
)
}
何塞·A的答案是做对了；使用React Material Tabs可在初始化Tabs组件时使用“useState”钩子设置状态：

<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>

const initialTabIndex= 0;
const [value, setValue] = React.useState(initialTabIndex);

您可以使用状态设置初始选项卡选择

const [value, setValue] = React.useState(2);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

需要有关
和
组件如何工作的更多信息，即：当您单击给定选项卡时，
中会发生什么？这适用于初始渲染。但是，现在当我单击其他选项卡时，尽管它们在单击时高亮显示，但它们的内容不会显示。仅显示最初选择的选项卡的内容。您需要设置选项卡，以便当您单击其中一个选项卡时，您的
selectedID
道具会发生变化。您找到解决方案了吗？是否尝试使用
？