前端开发之路：Modal 组件的进阶使用指南

2024-02-10 06:24:08

通过 API 调用控制 Modal

在 React 中，可以通过使用 ref 来获取 Modal 组件的实例。然后，就可以通过 ref.current 来访问组件的 API，并调用 show() 和 hide() 方法来控制 Modal 的显示和隐藏。

以下是一个简单的示例，展示了如何使用 API 调用来控制 Modal：

import { Modal } from 'antd';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.modalRef = React.createRef();
  }

  showModal = () => {
    this.modalRef.current.show();
  };

  hideModal = () => {
    this.modalRef.current.hide();
  };

  render() {
    return (
      <div>
        <button onClick={this.showModal}>显示 Modal</button>
        <button onClick={this.hideModal}>隐藏 Modal</button>
        <Modal ref={this.modalRef} title="这是一个 Modal" visible={false}>
          <p>这是一个 Modal 的内容</p>
        </Modal>
      </div>
    );
  }
}

2. 将 Modal 封装成组件

如果需要在不同的场景中重复使用 Modal，可以将其封装成一个组件。这样，就可以在需要的时候直接导入和使用该组件，而无需重复编写代码。

以下是一个简单的示例，展示了如何将 Modal 封装成组件：

import { Modal } from 'antd';

const MyModal = (props) => {
  return (
    <Modal title={props.title} visible={props.visible} onOk={props.onOk} onCancel={props.onCancel}>
      {props.content}
    </Modal>
  );
};

export default MyModal;

然后，就可以在需要的时候直接导入和使用 MyModal 组件，如下所示：

import MyModal from './MyModal';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModal = () => {
    this.setState({ visible: true });
  };

  hideModal = () => {
    this.setState({ visible: false });
  };

  render() {
    return (
      <div>
        <button onClick={this.showModal}>显示 Modal</button>
        <MyModal
          title="这是一个 Modal"
          visible={this.state.visible}
          onOk={this.hideModal}
          onCancel={this.hideModal}
          content={<p>这是一个 Modal 的内容</p>}
        />
      </div>
    );
  }
}