Javascript 使用react web选项卡，是否有办法切换选项卡并通过单击导航到散列ID？

我正在使用其中三个选项卡（演讲者、演讲、日程安排）构建一个会议网站。我认为在标签之间进行交互是公平的，这里有几个我似乎无法解决的用例

在#talks选项卡中，我单击bio hash-#johnsmith。此id存在于页面中，但由于我没有首先将选项卡切换到#扬声器，因此不会呈现任何内容

如果我想引用某个特定的谈话并通过电子邮件发送给某人，则url:选项卡将不会打开，并且除了选项卡之外什么都不会呈现

当我使用“#id”单击锚定标记href时，我必须重新加载页面才能启动，这一事实使问题更加复杂

我觉得在更改选项卡或其他内容时，应该有某种方法来传递参数。。。我现在处境艰难，因为我正在发布代码，但非常需要这个功能

这是实际的开源回购协议。我引用的代码可以在src/pages/Agenda/中找到

下面是一些示例代码

Agenda.js

  <Tabs defaultTab={this.state.defaultTab}
    onChange={(tabId) => { this.changeTab(tabId) }}
    vertical={vert}>
    <TabList vertical>
      <Tab tabFor="speakers">Speakers</Tab>
      <Tab tabFor="talks">Talks</Tab>
    <span>
      <TabPanel tabId="speakers">
        <Speakers />
      </TabPanel>
      <TabPanel tabId="talks">
        <Talks />
      </TabPanel>
    </span>
  </Tabs>

{this.changeTab（tabId）}
垂直={vert}>
演讲者
谈话

Talks.js

changeTab(id) {
  window.location.reload(false); 
}

getTalks() {
  // Order Alphabetically
  const talksOrdered = speakerConfig.sort((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0));
  const talks = talksOrdered.map((ele, idx) => {
    const twitterUrl = ele.twitter.replace('@', '');

    return (
      <div id={ele.talk_id}
        key={idx}
        className='single-talk'>
        <div className='talk-title'>{ele.title}</div>
        <div className='talk-sub-title'>
          <div className='speaker-name'>
            <a onClick={() => {this.changeTab(ele.speaker_id)}}
              href={`#${ele.speaker_id}`}>{ele.speaker}</a>
          </div>
        ...

changeTab（id）{
window.location.reload（false）；
}
getTalks（）{
//按字母顺序排列
const talksOrdered=speakerConfig.sort（（a，b）=>（a.title>b.title）？1:（（b.title>a.title）？-1:0）；
const talks=talksOrdered.map（（ele，idx）=>{
const twitterUrl=ele.twitter.replace（'@'，''）；
返回(
{ele.title}
...

我通过发送

#tab#title/speaker_name

，然后在主选项卡文件中添加

组件willmount

生命周期方法和函数来完成这一任务，如下所示

componentWillMount() {
  const defaultTab = this.props.location.hash ? this.props.location.hash.split('#')[1] : 'schedule';
  this.setState({
    defaultTab: defaultTab
  });
  this.handleHashChange();
  window.addEventListener('hashchange', this.handleHashChange);
}
handleHashChange = () => {
  // given `#speakers/dave` now you have tabName='speakers', speakerHash='dave'
  const [tabName, speakerHash] = window.location.hash.replace('#', '').split('/');
  const tabNamesToWatchFor = [
    'schedule',
    'speakers'
  ];

  if (tabNamesToWatchFor.includes(tabName)) {
    this.setState({
      defaultTab: tabName,
      // pass this.state.speakerHash to <Speakers/> and use this for scrollIntoView in componentDidMount
      speakerHash: speakerHash
    });
  }
}

---

我通过发送

#tab_title/speaker_name

，然后在主选项卡文件中添加

组件willmount

生命周期方法和函数来完成这一任务，如下所示

componentWillMount() {
  const defaultTab = this.props.location.hash ? this.props.location.hash.split('#')[1] : 'schedule';
  this.setState({
    defaultTab: defaultTab
  });
  this.handleHashChange();
  window.addEventListener('hashchange', this.handleHashChange);
}
handleHashChange = () => {
  // given `#speakers/dave` now you have tabName='speakers', speakerHash='dave'
  const [tabName, speakerHash] = window.location.hash.replace('#', '').split('/');
  const tabNamesToWatchFor = [
    'schedule',
    'speakers'
  ];

  if (tabNamesToWatchFor.includes(tabName)) {
    this.setState({
      defaultTab: tabName,
      // pass this.state.speakerHash to <Speakers/> and use this for scrollIntoView in componentDidMount
      speakerHash: speakerHash
    });
  }
}