如何触发面板在 const 之外打开？

Question

我明白const isOpen所在的行是一个钩子，但我需要将openPanel的值更改为true才能打开面板。我是 React 和 FluentUI 的新手。这可能是非常明显的事情，但我现阶段还没有意识到。

export const FactionsMap = () =>{

const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
return(
    <ThemeProvider  applyTo='body' theme={myTheme}>
        <TopBar/>
        <Separator/>
        <Stack horizontalAlign="center" styles={contentStackStyle}>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
        </Stack>
        <Panel headerText="Selected Tile" isBlocking={false}  onDismiss={dismissPanel} closeButtonAriaLabel="Close">
            <p id="panelContent"></p>
        </Panel>
    </ThemeProvider>
    
  );
};

const onSquareClick = (event:any) => {
console.log(event.target.innerHTML);
const panelContent = document.getElementById("panelContent");
if(panelContent !== null)
{
    panelContent.innerHTML = event.target.innerHTML;
}

}

Answer 1

openPanel是一个函数，所以就叫它：openPanel()。同样，您可以执行 closePanel() 以编程方式关闭面板。

为了更好地理解 useBooelan()，我建议使用谷歌搜索“react useBoolean”。有几篇很好的博客文章解释了如何使用它。

Answer 2

我想通了。原来我只需要通过行将 openPanel 函数作为道具传递给方块，现在它可以工作了！

如何触发面板在 const 之外打开？

How can I trigger a panel to open outside of the const?

reactjs

react-hooks

fluentui-react