在React项目开发中，我们经常会遇到多个页面需要相似功能组件的情况，如果每次都重新编写组件代码，会极大降低开发效率。而Props作为React组件之间传递数据的核心机制，正是解决组件复用和个性化定制问题的关键。
什么是Props
Props是Properties的缩写，是React组件接收外部传入数据的载体，它是只读的，组件内部不能直接修改Props的值。通过向组件传递不同的Props，我们可以让同一个组件呈现出不同的效果，实现复用和定制的目的。
比如我们有一个基础的按钮组件，只需要传入不同的文本内容、颜色配置，就能生成不同样式的按钮，不需要重复编写按钮的实现逻辑。
Props的基础使用
父组件向子组件传递Props
父组件在使用子组件时，直接在子组件标签上添加属性，就可以把数据传递给子组件，子组件通过函数参数或者类的props属性接收即可。
以下是函数组件接收Props的示例：
// 子组件：基础按钮组件
function BaseButton(props) {
// props接收父组件传递的所有属性
const { text, bgColor, textColor, onClick } = props;
return (
<button
style={{ backgroundColor: bgColor, color: textColor, padding: '8px 16px', border: 'none', borderRadius: '4px' }}
onClick={onClick}
>
{text}
</button>
);
}
// 父组件使用
function App() {
const handleClick = () => {
console.log('按钮被点击了');
};
return (
<div>
<BaseButton text="提交" bgColor="#1677ff" textColor="#fff" onClick={handleClick} />
<BaseButton text="取消" bgColor="#f5f5f5" textColor="#333" onClick={() => console.log('取消操作')} />
</div>
);
}解构Props简化代码
除了上面的方式，也可以直接在函数参数中解构Props，让代码更简洁：
// 直接解构Props
function BaseButton({ text, bgColor = '#1677ff', textColor = '#fff', onClick }) {
return (
<button
style={{ backgroundColor: bgColor, color: textColor, padding: '8px 16px', border: 'none', borderRadius: '4px' }}
onClick={onClick}
>
{text}
</button>
);
}Props的进阶用法
设置Props默认值
如果父组件没有传递某个Props，我们可以给Props设置默认值，避免组件出现空值报错的情况。函数组件可以通过默认参数设置，也可以使用defaultProps属性。
// 方式1：函数参数默认值
function BaseButton({ text = '默认按钮', bgColor = '#1677ff', textColor = '#fff', onClick }) {
return (
<button
style={{ backgroundColor: bgColor, color: textColor, padding: '8px 16px', border: 'none', borderRadius: '4px' }}
onClick={onClick}
>
{text}
</button>
);
}
// 方式2：使用defaultProps（类组件也适用）
BaseButton.defaultProps = {
text: '默认按钮',
bgColor: '#1677ff',
textColor: '#fff'
};Props类型校验
为了规范Props的传递，避免传入错误类型的数据导致组件异常，我们可以使用prop-types库对Props进行类型校验，在开发阶段就能发现错误。
import PropTypes from 'prop-types';
function BaseButton({ text, bgColor, textColor, onClick, size }) {
const sizeMap = {
small: { padding: '4px 8px', fontSize: '12px' },
middle: { padding: '8px 16px', fontSize: '14px' },
large: { padding: '12px 24px', fontSize: '16px' }
};
const sizeStyle = sizeMap[size] || sizeMap.middle;
return (
<button
style={{
backgroundColor: bgColor,
color: textColor,
border: 'none',
borderRadius: '4px',
...sizeStyle
}}
onClick={onClick}
>
{text}
</button>
);
}
// 定义Props类型校验规则
BaseButton.propTypes = {
text: PropTypes.string.isRequired, // text是必传的字符串类型
bgColor: PropTypes.string, // bgColor是可选的字符串类型
textColor: PropTypes.string,
onClick: PropTypes.func, // onClick是可选的函数类型
size: PropTypes.oneOf(['small', 'middle', 'large']) // size只能是这三个值之一
};传递复杂类型的Props
Props不仅可以传递字符串、数字、函数，还可以传递数组、对象、甚至React元素，满足更复杂的定制需求。
// 子组件：卡片组件
function InfoCard({ title, content, extra, footer }) {
return (
<div style={{ border: '1px solid #e8e8e8', borderRadius: '8px', padding: '16px', width: '300px' }}>
<div style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '8px' }}>{title}</div>
<div style={{ color: '#666', marginBottom: '12px' }}>{content}</div>
{extra && <div style={{ marginBottom: '12px' }}>{extra}</div>}
{footer && <div style={{ borderTop: '1px solid #e8e8e8', paddingTop: '12px' }}>{footer}</div>}
</div>
);
}
// 父组件使用，传递React元素作为Props
function App() {
return (
<InfoCard
title="用户信息"
content="这是用户的个人简介内容"
extra={<span style={{ color: '#1677ff' }}>VIP用户</span>}
footer={<BaseButton text="编辑信息" bgColor="#1677ff" textColor="#fff" />}
/>
);
}Props使用的注意事项
- Props是只读的，组件内部不要尝试修改Props的值，如果需要修改数据，应该通过回调函数通知父组件修改，再传递给子组件。
- 不要传递过多的Props给一个组件，如果某个组件的Props超过5个，建议考虑拆分组件，或者把相关Props合并成一个对象传递。
- 对于复杂的组件定制场景，可以结合Props和children使用，children可以接收组件标签包裹的内容，让组件更灵活。
通过合理使用Props，我们可以让React组件具备极强的复用性和定制能力，减少重复代码编写，提升项目的可维护性。在实际开发中，可以根据组件的使用场景，灵活组合Props的基础用法和进阶技巧，满足不同的业务需求。