当前位置：首页 > React

react如何创建公共组件

2026-01-24 17:30:32React

创建公共组件的步骤

在React中创建公共组件有助于代码复用和维护。以下是具体实现方法：

定义组件文件结构

通常将公共组件存放在src/components目录下。每个组件应单独建立文件夹，包含组件文件（.jsx或.tsx）和样式文件（.css或.module.css）。例如：

src/
  components/
    Button/
      Button.jsx
      Button.module.css

编写基础组件代码

使用函数组件或类组件方式创建。函数组件是现代React推荐的方式：

import React from 'react';
import styles from './Button.module.css';

const Button = ({ children, onClick, disabled = false }) => {
  return (
    <button 
      className={styles.button} 
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

export default Button;

添加PropTypes类型检查

为组件添加prop类型验证确保正确使用：

react如何创建公共组件

import PropTypes from 'prop-types';

Button.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func,
  disabled: PropTypes.bool
};

使用CSS Modules管理样式

创建对应的样式文件避免类名冲突：

/* Button.module.css */
.button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

导出组件供其他模块使用

确保组件有默认导出：

react如何创建公共组件

export default Button;

在其他组件中引用

通过import语句使用公共组件：

import Button from '../components/Button/Button';

function App() {
  return (
    <Button onClick={() => console.log('Clicked')}>
      Submit
    </Button>
  );
}

处理组件默认值和可选props

为可选props设置默认值：

Button.defaultProps = {
  disabled: false,
  onClick: () => {}
};

使用TypeScript增强类型安全（可选）

对于TypeScript项目，可以定义接口：

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ children, onClick, disabled = false }) => {
  // 组件实现
};