当我单击某个按钮时，反应流利的UI打开组件

Question

即时消息，当我从命令栏中单击某个按钮时，我想打开带有流利的UI的React页面，我想打开某个组件（documentpane.tsx）。

这是我的命令栏代码：

const theme = getTheme();
// Styles for both command bar and overflow/menu items
const itemStyles: Partial<IContextualMenuItemStyles> = {
  label: { fontSize: 18 },
  icon: { color: uPrinceTheme.palette.themePrimary },
  iconHovered: { color: uPrinceTheme.palette.themeSecondary },
};
// For passing the styles through to the context menus
const menuStyles: Partial<IContextualMenuStyles> = {
  subComponentStyles: { menuItem: itemStyles, callout: {} },
};

const getCommandBarButtonStyles = memoizeFunction(
  (originalStyles: IButtonStyles | undefined): Partial<IContextualMenuItemStyles> => {
    if (!originalStyles) {
      return itemStyles;
    }

    return concatStyleSets(originalStyles, itemStyles);
  },
);

// Custom renderer for main command bar items
const CustomButton: React.FunctionComponent<IButtonProps> = props => {
  const buttonOnMouseClick = () => alert(`${props.text} clicked`);
  // eslint-disable-next-line react/jsx-no-bind
  return <CommandBarButton {...props} onClick={buttonOnMouseClick} styles={getCommandBarButtonStyles(props.styles)} />;
};

// Custom renderer for menu items (these must have a separate custom renderer because it's unlikely
// that the same component could be rendered properly as both a command bar item and menu item).
// It's also okay to custom render only the command bar items without changing the menu items.
const CustomMenuItem: React.FunctionComponent<IContextualMenuItemProps> = props => {
  // Due to ContextualMenu implementation quirks, passing styles or onClick here doesn't work.
  // The onClick handler must be on the ICommandBarItemProps item instead (_overflowItems in this example).
  return <ContextualMenuItem {...props} />;
};

const overflowProps: IButtonProps = {
  ariaLabel: 'More commands',
  menuProps: {
    contextualMenuItemAs: CustomMenuItem,
    // Styles are passed through to menu items here
    styles: menuStyles,
    items: [], // CommandBar will determine items rendered in overflow
    isBeakVisible: true,
    beakWidth: 20,
    gapSpace: 10,
    directionalHint: DirectionalHint.topCenter,
  },
};

export const CommandBarButtonAsExample: React.FunctionComponent = () => {
  return (
    <CommandBar
      
      overflowButtonProps={overflowProps}
      // Custom render all buttons
      buttonAs={CustomButton}
      items={_items}
      ariaLabel="Use left and right arrow keys to navigate between commands"
    />
  );
};

const _items: ICommandBarItemProps[] = [
  {
    key: 'newItem',
    text: 'Create',
    iconProps: { iconName: 'Add' },
  },
  {
    key: 'upload',
    text: 'Read',
    iconProps: { iconName: 'Read' },
    href: 'https://developer.microsoft.com/en-us/fluentui',
  },
  { key: 'share', text: 'Update', iconProps: { iconName: 'Share' } },
  { key: 'download', text: 'Delete', iconProps: { iconName: 'Delete' } },

];


export default CommandBarButtonAsExample;

这是我的index.tsx：

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import App from "./App";

const rootElement = document.getElementById("root");
initializeIcons();
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

我还将在其中添加一个带有我的代码的git repo，以便你们可以更好地看到它。

https://github.com/robbe-delsoir/app2

非常感谢您的帮助呢

罗伯

Answer 1

在Commandbar项目中添加一个ONCLICK方法，该方法为DocumentPane.tsx设置了Show组件状态。

const _items: ICommandBarItemProps[] = [
   {
      key: 'newItem',
      text: 'Create',
      iconProps: { iconName: 'Add' },
    },
    {
       key: 'upload',
       text: 'Read',
       iconProps: { iconName: 'Read' },
       onClick:{ () => { setShowDocumentPane(true) } }
       href: 'https://developer.microsoft.com/en-us/fluentui',
    },
    { key: 'share', text: 'Update', iconProps: { iconName: 'Share' } },
    { key: 'download', text: 'Delete', iconProps: { iconName: 'Delete' } },
];