withModal：在 React 中优雅地使用弹窗

2023-11-24 05:20:45

在构建现代 web 应用程序时，React 因其高效的渲染性能和模块化的组件设计备受青睐。随着应用程序的功能日益丰富，构建可复用和可维护的 UI 组件变得越来越重要。在这篇文章中，我们将介绍如何通过编写一个高阶组件 withModal，以优雅的方式在 React 中使用弹窗。

在React中使用弹框组件是常见的功能。通过使用一个高阶组件withModal可以帮助开发者优雅的构建弹框组件。这篇文章介绍了withModal组件的设计和使用,帮助开发者更有效地使用弹出窗口。</#description>

设计高阶组件 withModal

import React from 'react';

const withModal = (Component) => {
  return class WithModal extends React.Component {
    state = {
      isOpen: false,
    };

    openModal = () => {
      this.setState({ isOpen: true });
    };

    closeModal = () => {
      this.setState({ isOpen: false });
    };

    render() {
      return (
        <>
          <Component {...this.props} openModal={this.openModal} />
          {this.state.isOpen && <Modal onClose={this.closeModal} />}
        </>
      );
    }
  };
};

export default withModal;

使用高阶组件 withModal

import React from 'react';
import withModal from './withModal';

const MyModalComponent = (props) => {
  const { openModal } = props;

  return (
    <button onClick={openModal}>Open Modal</button>
  );
};

const MyModal = withModal(MyModalComponent);

export default MyModal;