Предотвращение перезагрузки страницы при рендеринге UI Fabric реагирует на компонент Nav - PullRequest
Новая
       5

Предотвращение перезагрузки страницы при рендеринге UI Fabric реагирует на компонент Nav

0 голосов
/ 29 августа 2018

Я застрял, пытаясь заставить Nav-компонент ui-fabric работать с activ-router-dom v4 +. Мое решение «работает», но перерисовывается вся страница, а не только компонент NavSelection. После некоторых исследований я понимаю, что мне нужно где-то сделать e.preventDefault (), но я не могу понять, где его добавить.

Главная страница: 

    export const Home = () => {
        return (
            <div className="ms-Grid-row">
                <div className="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
                    <Navbar />
                </div>
                <div className="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
                    <NavSelection />
                </div>
            </div>
        );
    }

Navbar: 

const navGroups = [
  {
    links: [
      { name: 'Name1', url: '/Name1', key: '#Name1' },
      { name: 'Name2', url: '/Name2', key: '#Name2' }
    ]
  }
];

export class Navbar extends React.Component<any, any> {
  constructor(props: INavProps) {
    super(props);

    this.state = {
      selectedNavKey: '#Name1'
    };
  }

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

  public render(): JSX.Element {
    const { selectedNavKey } = this.state;

    return (
      <Nav
        selectedKey={selectedNavKey}
        groups={navGroups}
      />
    );
  }
}

NavSelection: 

export const NavSelection = () => {
    return (
        <div>
            <Route path="/Name1" component={Component1} />
            <Route path="/Name2" component={Component2} />
        </div>
    );
}

Любая помощь очень ценится

Редактировать: я пытался поместить его в componentDidMount так: 

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

Это не работает.

1 Ответ

0 голосов
/ 29 августа 2018

Полагаю, вы используете Microsoft https://developer.microsoft.com/en-us/fabric#/components/nav#Variants

В этом случае вам необходимо указать обратный вызов для элемента навигации. Обычно противодействовать использованию таких вещей, как window.addEventListener в реакции.

Это будет выглядеть примерно так. 

export class Navbar extends React.Component<any, any> {
  constructor(props: INavProps) {
    super(props);

    this.state = {
      selectedNavKey: '#Name1'
    };
  }

  public handleNavClick(event, { key, url }) {
      // You also need to manually update the router something like
      history.push(url);
      this.setState({ selectedNavKey: key });
  }

  public render(): JSX.Element {
    const { selectedNavKey } = this.state;

    return (
      <Nav
        selectedKey={selectedNavKey}
        groups={{
          links: [
            { name: 'Name1', url: '/Name1', key: '#Name1', onClick: this.handleNavClick },
            { name: 'Name2', url: '/Name2', key: '#Name2', onClick: this.handleNavClick }
          ]
        }}
      />
    );
  }
}
...