1

我正在使用 fluent-ui-react 中的 Modal 组件

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），我想在 Modal 打开时渲染它。在这个 body 组件中，我有一个 click 事件，当它完成它的工作时，它也应该关闭 Modal。

有没有办法将ModalExtended组件中的hideModal函数传递给我的 body 组件，这样我就可以从 body 组件中关闭 Modal 了？

4

1 回答 1

1

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

于 2020-11-27T19:29:37.480 回答