React fluent ui在点击某个按钮时打开一个组件

Question

我用流畅的ui做一个反应页面，我想打开一个特定的组件(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;

这是我的索引。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仓库，里面有我的代码，这样你们可以更好地看到它。

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

非常感谢您的帮助!

Robbe

Answer 1

在命令栏项中添加一个onClick方法，用于设置documentpane.tsx的显示组件状态。

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' } },
];