leoking

Code Example#

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const Modal = ({ title, body, onClose }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => {
    setIsModalOpen(false);
    onClose();
  };

  return (
    <>
      <button onClick={handleOpenModal}>Open Modal</button>

      {/* Modal Dialog */}
      {isModalOpen && (
        <div className="modal">
          <div className="modal__overlay" onClick={handleCloseModal} />
          <div className="modal__dialog">
            <div className="modal__header">{title}</div>
            <div className="modal__body">{body}</div>
            <button className="modal__close-btn" onClick={handleCloseModal}>
              X
            </button>
          </div>
        </div>
      )}
    </>
  );
};

Modal.propTypes = {
  title: PropTypes.string.isRequired,
  body: PropTypes.node.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default Modal;

In this example, we have encapsulated a modal component called Modal. It has three props:

• title: The title of the modal, required.
• body: The content of the modal, supports any type of React element, required.
• onClose: The callback function when the modal is closed, required.
  The main functionality of this component is to display a modal. When the user clicks the open button, a modal overlay and a modal dialog will appear, and the content of the modal is determined by the title and body.

What should be considered when encapsulating reusable components? In addition to specific functionality, here are some general considerations:

1. Reusability of the component: When encapsulating a component, future potential changes in requirements should be considered, and the design of the component should be extensible.
2. Usability of the component: To make it convenient for developers to use, the API of the component should be as simple and clear as possible, and sufficient documentation and examples should be provided.
3. Maintainability of the component: The code should be easy to understand and modify, with a clear structure and no excessive coupling or duplicate code.
4. Performance of the component: The component should meet performance requirements and perform well in various scenarios.
5. Testing of the component: The component should be thoroughly tested to ensure that it behaves correctly in various situations.

Explanation of the Component#

Next, let me explain the implementation of this modal component in detail:

State management of the component#

In this component, we use React's useState Hook to manage the open and close state of the modal. Specifically, a state called isModalOpen is defined in the component, with an initial value of false, indicating that the modal is closed.

Then, we use the handleOpenModal and handleCloseModal functions to control the value of isModalOpen. When the user clicks the open button, we call the handleOpenModal function to set isModalOpen to true, thereby displaying the modal. When the user clicks the close button inside the modal or the overlay, we call the handleCloseModal function to set isModalOpen to false, thereby closing the modal.

Styling of the component#

In this component, we use CSS to define the style of the modal. Specifically, we wrap the modal in a div with the class name "modal", and inside this div, we define three child elements:

• modal__overlay: The overlay, used to prevent the user from interacting with other content.
• modal__dialog: The dialog box, used to display the content of the modal.
• modal__close-btn: The close button, used to close the modal.
  In CSS, we can use pseudo-elements ::before and ::after to create some common UI elements, such as arrows, buttons, etc.

Prop validation of the component#

In this component, we use the prop-types library to validate the props. Specifically, when defining the component, we declare the props of Modal by importing PropTypes, and validate them using Modal.propTypes. This ensures that the props passed to the component meet the expected types and format requirements, reducing the possibility of errors.

In summary, when encapsulating reusable components, considerations should be given to the reusability, usability, maintainability, performance, and testing of the component. Additionally, attention should be paid to details such as state management, styling, and prop validation.