在React项目开发过程中，类组件和函数组件混合使用是很常见的场景，不少开发者在类父组件向函数式子组件传递props时会遇到各类错误，比如子组件拿不到数据、页面渲染异常、控制台抛出类型相关报错等，这些问题大多和传递方式、组件定义规范有关。
常见错误场景与成因
1. 函数子组件未正确接收props
函数组件接收props需要通过参数传入，部分开发者会忘记声明参数，或者在类组件中传递时写法不符合规范，导致子组件无法获取到传递的数据。
2. props类型校验不匹配
如果在子组件中使用了PropTypes做类型校验，而父组件传递的数据类型和约定不一致，就会触发校验报错，比如约定传递字符串却传了数字。
3. 类组件状态未正确初始化或更新
类组件中如果状态没有在constructor里正确初始化，或者更新状态时没有使用setState方法，传递的props可能一直是undefined，导致子组件出错。
对应解决方法
正确定义函数子组件接收props
函数子组件需要把props作为第一个参数传入，直接通过参数解构或者props.属性名的方式获取数据，示例如下：
// 函数式子组件，正确接收props
import React from 'react';
import PropTypes from 'prop-types';
const ChildComponent = (props) => {
// 可以通过解构获取props里的数据
const { name, age } = props;
return (
<div>
<p>姓名：{name}</p>
<p>年龄：{age}</p>
</div>
);
};
// 定义props类型校验
ChildComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
};
export default ChildComponent;
类父组件正确传递props
类父组件在渲染子组件时，直接在子组件标签上以属性形式传递数据即可，注意状态需要在constructor中初始化，更新时使用setState：
// 类父组件，正确传递props
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
// 正确初始化状态
this.state = {
userName: '张三',
userAge: 25
};
}
// 更新状态的方法
updateUserInfo = () => {
this.setState({
userName: '李四',
userAge: 26
});
};
render() {
return (
<div>
<button onClick={this.updateUserInfo}>更新用户信息</button>
{/* 向子组件传递props */}
<ChildComponent
name={this.state.userName}
age={this.state.userAge}
/>
</div>
);
}
}
export default ParentComponent;
避免常见传递误区
不要在传递props时使用不必要的包装，比如不要给props套多层对象，也不要传递未定义的变量。如果传递的是方法，需要保证方法的作用域正确，避免在子组件中调用时丢失this。
排查步骤总结
遇到传props出错时，可以按照以下步骤排查：
- 先检查函数子组件是否正确声明了props参数，是否能正常打印props内容
- 检查类父组件的状态是否正确初始化，传递的属性是否有值
- 查看是否有props类型校验，传递的数据类型是否和校验规则匹配
- 如果是更新后出错，检查状态更新是否使用了setState，是否是异步更新导致的时机问题
按照以上方法基本可以解决大部分类父组件向函数式子组件传props出错的问题，开发时养成规范写法的习惯，也能减少这类问题的出现。