Fluent UI React 命令栏使用状态不可能

Question

我是 Fluent UI React 组件的新手。我正在尝试通过流利的 UI react found here it is CommandBar with overflowing menu items. If I want to navigate to a different page with the menu items I use the history.push("/myLink") as explained 在命令栏控件上实现 React Router。但是为了让它工作，我需要在功能组件中访问 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 放在其他地方 React 投诉非法使用 useState。如何让 useState 在 const _items 对象中可用？任何帮助将不胜感激。

Answer 1

以下是相同命令栏组件对我有用的部分。

您必须确保您的路由器设置为 HashRouter 并且您的 <Route/> 的路径属性设置为 /#properties 通过 href 属性的按钮 - 而不是通过 onClick.

我们有描述路线的路线文件：

/* 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>
          );
     }
}

Fluent UI React 命令栏使用状态不可能

Fluent UI React commandbar usestate not possible

reactjs

office-js

fluent-ui