如何在react中从父组件调用子组件回调事件

Question

你好，我是 React 的初学者，我在我的项目中使用 Fluent UI。 我计划使用 Fluent UI 中的面板控件并将其作为通用组件，以便我可以重用它。我使用以下代码

import * as React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { Panel } from '@fluentui/react/lib/Panel';
import { useBoolean } from '@fluentui/react-hooks';

export const PanelBasicExample: React.FunctionComponent = () => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);

  return (
    <div>
      
      <Panel
        headerText="Sample panel"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Close"
      >
        <p>Content goes here.</p>
      </Panel>
    </div>
  );
};

https://developer.microsoft.com/en-us/ Fluentui#/controls/web/panel#best-practices

我删除示例中的 。

所以我的问题是如何从任何其他组件打开或关闭此面板？

Answer 1

我会为此使用 React useState 钩子。

在想要渲染面板的组件中创建一个状态，例如

const [openPanel, setOpenPanel] = useState({
     isOpen: false,
     headerText: ''
})

，您将从按钮打开它

  <Button onClick={() => setOpenPanel({
           isOpen: true,
           headerText: 'Panel-1'
       })
     }> Open me ! </Button>

然后将状态作为道具传递给面板组件

    <PanelBasicExample openPanel={openPanel} setOpenPanel={setOpenPanel} /> 

---

in PanelBasicExample component you can extract the props and use it.

    export const PanelBasicExample(props) => {
      const {openPanel, setOpenPanel} = props
      const handleClose = () => {setOpenPanel({isOpen: false})}
     return (
    <div>  
      <Panel
        headerText={openPanel.headerText}
        isOpen={openPanel.isOpen}
        onDismiss={() => handleClose}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Close"
      >
        <p>Content goes here.</p>
      </Panel>
    </div>
  );
}