如何封装react组件
封装React组件的核心方法
明确组件的职责与边界 确定组件需要实现的功能和对外暴露的接口，避免过度耦合。设计时应考虑单一职责原则，使每个组件只关注特定功能。
使用PropTypes或TypeScript定义接口 通过PropTypes或TypeScript类型系统明确props的类型和默认值，增强代码可维护性。
import PropTypes from 'prop-types';
function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}
Button.propTypes = {
text: PropTypes.string.isRequired,
onClick: PropTypes.func
};合理处理组件状态 根据业务场景选择状态管理方式：简单状态使用useState，复杂逻辑可使用useReducer或状态管理库。避免在子组件中直接修改父组件传递的props。
实现组件复用 通过children插槽或render props模式增强组件灵活性。高阶组件(HOC)或自定义hooks可提取通用逻辑。
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="content">{children}</div>
</div>
);
}样式封装策略 CSS Modules、Styled Components或Emotion等方案实现样式隔离。避免全局样式污染，类名命名遵循BEM等规范。
处理边界情况 添加错误边界(Error Boundaries)捕获子组件异常，使用defaultProps设置默认值，对空状态进行友好处理。
文档与示例 编写清晰的README说明组件用法，提供Storybook或代码示例展示不同使用场景。类型定义文件应包含详细注释。
/
* 通用按钮组件
* @param {Object} props - 组件属性
* @param {string} props.text - 按钮显示文本
* @param {Function} [props.onClick] - 点击回调函数
*/
export function Button({ text, onClick }) {
// 组件实现
}版本控制与发布 通过npm package发布组件，遵循语义化版本控制。配置peerDependencies声明React版本要求，打包时排除第三方库。
