Question

我总体上刚刚学习了React，并遵循了一些入门教程，所以对不起，我的问题很愚蠢，或者所使用的代码总体上不好（不要犹豫，让我知道），但是在搜索了很多之后，似乎找不到以下问题的答案：

我将Fabric React与JS实现（而不是TS）一起使用。通过使用在这里找到的示例，我成功地集成了Nav组件：https://developer.microsoft.com/en-us/fabric#/components/nav

可悲的是，此示例错过了selected事件的实现（用蓝色条突出显示所选项目），该示例只是将Nav组件的所选项目硬编码为key：key1：

selectedKey={'key1'}

经过一番研究，我找到了添加选定事件以改变选择的完美示例，我在这里找到了https://codepen.io/dzearing/pen/ZBGNQg?editors=0010

我重写了它，以便可以在我的JS文件中使用它：

let navGroups = [
  {
    links: [
      {
        name: 'Home', 
        url: '#', 
        key: '#', 
        icon: 'HomeSolid', 
      },
      {
        key: '#recent',
        name: 'Recent',
        url: '#recent'
      },
      {
        key: '#photos',
        name: 'Photos',
        url: '#photos'
      },
      {
        name: 'Settings',
        url: '#',
        key: '#next', 
        links: [
          {
            name: 'Staff',
            url: '#',
            key: '#key2',
            icon: 'People'
          },
          {
            name: 'Restrictions',
            url: '#',
            key: '#key3',
            icon: 'Lock'
          }
        ],
        isExpanded: true,
        icon: 'Settings',
      },
    ]
  }
];

class NavBar extends React.Component {
  constructor(props) {
    super(props);
    this._onClickHandler = this._onClickHandler.bind(this);
    this.state = {
      selectedNavKey: '#'
    }
  }

  render() {
    let { selectedNavKey } = this.state;

    return (
      <div className="ms-Nav-LeftPane">
        <Nav
          selectedKey={ selectedNavKey }
          groups={ navGroups }
        />
      </div>
    );
  }

  componentDidMount() {
    window.addEventListener('hashchange', () => {
      this.setState({ selectedNavKey: document.location.hash || '#' });
    })
  }

}

选定的事件对于常规按钮正常工作，但是由于某些原因，它不适用于Settings导航项目，该项目具有它自己的Links项目。有什么线索为什么对Settings项目不起作用？

Answer 1

我找到了解决方法。

问题是我在selectedNavKey状态使用的URL属性上具有相同的值：

 componentDidMount() {
    window.addEventListener('hashchange', () => {
      this.setState({ selectedNavKey: document.location.hash || '#' });
    })
  }

Settings导航字和它的孩子导航字都在其#属性中使用url，这导致selectedNavKey: document.location.hash || '#'无法正常工作。我从不知道document.location.hash函数使用url，但是在阅读以下内容后，它变得更加清晰：

Hash-Based & Push-State URLs In React

当links属性中存在links属性时，如何设置Nav组件的selectedKey属性-Fabric React Nav

1 个答案: