Состояние использования командной панели Fluent UI React невозможно

Я новичок в компонентах Fluent UI React. Я пытаюсь реализовать React Router в элементе управления на панели команд из свободного пользовательского интерфейса, обнаруженного здесь это CommandBar с переполненными пунктами меню. Если я хочу перейти на другую страницу с элементами меню, я использую history.push (/ myLink), как описано в здесь. Но для того, чтобы это заработало, мне понадобится доступ к useState в функциональном компоненте. код выглядит так:

        export const CommandBarBasicExample: React.FunctionComponent = () => {
        const [refreshPage, setRefreshPage] = useState(false);
      return (
        <div>
          <CommandBar
            items={_items}
            overflowItems={_overflowItems}
            overflowButtonProps={overflowProps}
            farItems={_farItems}
            ariaLabel="Use left and right arrow keys to navigate between commands"
          />
        </div>
      );
    };

    const _items: ICommandBarItemProps[] = [
      {
        key: 'newItem',
        text: 'New',
        cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
        iconProps: { iconName: 'Add' },
        subMenuProps: {
          items: [
            {  //first item in the menu
        key: "AddProperty",
        text: "Properties",
        iconProps: { iconName: "Add" },
        ["data-automation-id"]: "newProperty", // optional
        onClick: ()=>{handleclick()
        setRefreshPage(true);
        };
            {
              key: 'calendarEvent',
              text: 'Calendar event',
              iconProps: { iconName: 'Calendar' },
            },
          ],
        },
      },

Проблема, с которой я столкнулся, заключается в том, что если я использую setRefreshPage (true), код VS жалуется, что переменная состояния не распознается. если я помещаю useState в другое место. Отреагируйте на жалобы на незаконное использование useState. Как сделать так, чтобы useState можно было использовать в объекте const _items ?? любая помощь будет принята с благодарностью.


reactjs fluent-ui office-js
person g00golplex    schedule 04.11.2020    source источник
comment
Почему вы не используете хэш-роутер?   -  person Mavi Domates    schedule 05.11.2020
comment
Привет, я использую маршрутизатор Hash, но он все еще не работает :-(.   -  person g00golplex    schedule 05.11.2020
comment
Можете ли вы объяснить проблему - вы просто пытаетесь перемещаться по кнопке на панели команд?   -  person Mavi Domates    schedule 05.11.2020
comment
Действительно! Если я щелкну элемент панели команд, я хочу перейти к компоненту свойств. Этот компонент содержит мою бизнес-логику. Но когда я нажимаю кнопку, ничего не происходит. Я перестраиваю приложение с помощью Create response app и машинописного текста, чтобы посмотреть, как оно ведет себя в браузере. Если я использую BrowserRouter и использую history.push (/ Properties), он меняет URL-адрес в верхней части страницы, но не обновляется. Поэтому мне нужно было бы вызвать useState, но я не могу получить доступ к useState в объекте _items []. Я надеюсь это имеет смысл?   -  person g00golplex    schedule 05.11.2020
comment
А зачем вам вдвигаться в историю? На этой поверхности вы все равно не можете получить доступ к кнопке "Назад"?   -  person Mavi Domates    schedule 07.11.2020
comment
Мне не обязательно нужен history.push. Я просто хочу перейти к своему компоненту пользовательского интерфейса, который содержит бизнес-логику. Поэтому я хотел бы использовать меню для перехода ко всем экранам пользовательского интерфейса, которые мне нужны для моей бизнес-логики, потому что есть несколько частей приложения, которые требуют другого пользовательского интерфейса, и поэтому мне нужна некоторая навигация. :-)   -  person g00golplex    schedule 08.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вот что у меня работает с тем же компонентом командной панели.

Вы должны убедиться, что ваш маршрутизатор настроен как HashRouter, а свойства пути ваших <Route/> s настроены как /#properties через свойство href кнопки, а не через onClick.

У нас есть файл routes с описанием маршрутов:

/* routes.js */
export const Routes = {
   Properties: 'properties'
}

У нас есть этот файл, описывающий содержимое панели команд.

/* commandBarItems.js */

import Routes from './routes'
// IMPORTANT - CHECK OUT THE HREF PROP
const PropertiesButton = { key: Routes.Properties, name: 'Properties', href: `#${Routes.Properties}` };

export const CommandBarItems = { menu: [PropertiesButton] }

У нас есть app.js, где вы настраиваете хэш-маршрутизатор и компонент панели команд.

/* app.js */
import React, { Component } from 'react';
import { HashRouter as Router, Route } from "react-router-dom";
import { Fabric, initializeIcons, CommandBar } from 'office-ui-fabric-react';
import { PropertiesComponent } from './whichever-file-or-module';
import Routes from './routes';
import CommandBarItems from './commandBarItems';

class App extends Component {
    constructor() {
        super();
        initializeIcons();
        ...
    }

    render() {
        return (
          <div>
            <Fabric>
              <Router>
                <React.Fragment>
                  <CommandBar items={CommandBarItems.menu} farItems={CommandBarItems.farItems}/>
                  <Route path={`/${Routes.Properties}`} component={PropertiesComponent} />
                </React.Fragment>
              </Router>
             </Fabric>
            </div>
          );
     }
}
person Mavi Domates    schedule 12.11.2020
comment
Привет, Мави. Извините за задержку. У меня были каникулы. Я только что вернулся на работу. ты гений! мне просто пришлось использовать свойство href и страницу маршрутов! href: #${Routes.Properties}! Большое спасибо! - person g00golplex; 17.11.2020