Office Fluent UI / Fabric UI Modal - 如何从 body 组件中关闭它？

Question

我正在使用 fluent-ui-react

中的模态组件

https://developer.microsoft.com/en-us/fluentui#/controls/web/modal

像这样：

function ModalExtended(props) {
  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(
    false
  );
  const isDraggable = useBoolean(false);
  const titleId = useId("title");

  return (
    <div>
      <DefaultButton onClick={showModal} text={props.buttonText} />
      <Modal
        titleAriaId={titleId}
        isOpen={isModalOpen}
        onDismiss={hideModal}
        isBlocking={false}
        containerClassName={contentStyles.container}
      >
        <div className={contentStyles.header}>
          <span id={titleId}>{props.gridHeader}</span>
          <IconButton
            styles={iconButtonStyles}
            iconProps={cancelIcon}
            ariaLabel="Close popup modal"
            onClick={hideModal}
          />
        </div>
        <div className={contentStyles.body}>{props.body}</div>
      </Modal>
    </div>
  );
}

然后我从其他组件调用 ModalExtended 组件，如下所示：

<ModalExtended
            buttonText="Open modal button text"
            gridHeader="Modal header text"
            body={
              <GenericTreeGridContainer/>
            }
          />

在 body 道具中，我发送了另一个组件 (GenericTreeGridContainer)，我想在模态窗口打开时呈现该组件。在这个 body 组件中，我有一个点击事件，当它完成它的工作时，它也应该关闭 Modal。

有没有办法将 hideModal 函数从 ModalExtended 组件传递到我的 body 组件，这样我就可以 从 body 组件关闭模态窗口?

Answer 1

用 isModalOpen 和 hideModal 定义一个父组件，并将它们作为 props 传递到 modal 和 body 中。您也可以像 <props.body hideModal={...} /> 那样渲染 {props.body}，但我还没有尝试查看它的模式有多好。

Office Fluent UI / Fabric UI Modal - 如何从 body 组件中关闭它？

Office Fluent UI / Fabric UI Modal - how can I close it from the body component?

reactjs

modal-dialog

office-ui-fabric-react