1

我刚刚开始学习 React 并学习了一些入门教程，所以请原谅我的问题很愚蠢，或者使用的代码总体上很糟糕（不要犹豫让我知道），但是在谷歌搜索了很多之后，我似乎无法找到以下问题的答案：

我正在使用带有 JS 实现（而不是 TS）的 Fabric React。通过使用我在此处找到的示例，我成功集成了我的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？

4

1 回答 1

0

我找到了解决方案。

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

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

navitem Settings，它的孩子，都#在他们的url财产中使用，这导致selectedNavKey: document.location.hash || '#'无法正常工作。我从来不知道该document.location.hash函数使用了，url但是在阅读了以下内容后，它变得更加清晰：

React 中基于哈希和推送状态的 URL

于 2018-08-03T12:22:56.053 回答