@abdulghani/react-promise-modal 中文文档教程

Question

React Promise Modal

使用函数调用

Installation

npm

npm install @abdulghani/react-promise-modal

yarn

yarn add @abdulghani/react-promise-modal

Usage

  // other imports
  import createPromiseModal from "@abdulghani/react-promise-modal";

  // plug your component to it
  const showModal = createPromiseModal(MyModalComponent);

  // use it in your component/app
  const App = () => {
    const onClick = () => {
      showModal({
        title: "hello",
        body: "world",
        onConfirm: () => yourFunction(),
        // other configs
      });
    }

    return (
      <div>
        <button type="button" onClick={onClick}>Click Me</button>
      </div>
    );
  }

Setup your component

渲染您自己的 React 模态组件您的组件可以采用您想要的任何道具，并使用 showModal(config) config 对象填充道具。 并且您的组件需要在插入组件道具的组件内调用 onClose 方法以简单地关闭组件。

  // imports

  const MyModalComponent = props => {
    const { onClose } = props;  // plugged by the library
    const { title, body, onConfirm } = props; // plugged on your call

    const onOk = () => {
      onConfirm();
      onClose();  // also close the modal
    }

    return (
      <div className="modal">
        <div className="modal-header">
          {title}
        </div>
        <div className="modal-body">
          {body}
        </div>
        <div className="modal-footer">
          <button className="red" type="button" onClick={onClose}>Cancel</button>
          <button className="blue" type="button" onClick={onOk}>Ok</button>
        </div>
      </div>
    );
  }

If you have different/custom root node

如果您为您的应用程序具有/重命名不同的根节点。 您可以将 createPromiseModal 设置为指向您的节点 ID。

  const showModal = createPromiseModal(MyModalComponent, "my-custom-root"); // currently it takes string id