react 封装例子

import React from 'react';
import PropTypes from 'prop-types';

// 封装按钮组件
const Button = ({ text, onClick, disabled }) => {
  return (
    <button
      className="button"
      onClick={onClick}
      disabled={disabled}
    >
      {text}
    </button>
  );
};

// 定义组件的 props 类型
Button.propTypes = {
  text: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  disabled: PropTypes.bool,
};

// 默认 props 值
Button.defaultProps = {
  onClick: () => {}, // 空函数作为默认点击事件处理函数
  disabled: false, // 按钮默认可用
};

export default Button;

在这个例子中，我们封装了一个名为 Button 的按钮组件。这个组件接受三个 props：

• text：按钮文本内容，必需。
• onClick：点击按钮时触发的事件处理函数，可选。
• disabled：按钮是否禁用的状态，可选。

在组件的渲染函数中，我们使用 <button> 元素来表示按钮。通过传入的 props，我们可以设置按钮的文本、点击事件和禁用状态。

组件内部还使用了 PropTypes 来对传入的 props 进行类型检查，确保传入的数据符合预期。例如，text 必须是一个字符串，onClick 必须是一个函数，disabled 必须是一个布尔值。

此外，我们还为组件设置了默认的 props 值。如果在使用组件时没有传入相应的 props，将会使用默认值。

通过封装这个简单的按钮组件，我们可以在应用程序的不同地方复用它，并且不需要重复编写相似的代码。如果我们需要修改按钮的样式或行为，只需要修改 Button 组件的代码即可，而不必修改每个使用到的地方。

希望这个例子能帮助你更好地理解组件封装的过程和思路。如果还有其他问题，请随时提问！