react设置默认props及props数据类型

在react中父组件往子组件传值通过props属性,为了确保子组件不因props错误导致出错,因此需要对props进行一些初始化设置。

使用prop-types设置props类型

实例代码:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

const defaultProps = {
	name: '',
	age: 0,
	sex: '未知',
	list: []
};

class Test extends Component {
	// ...
}

Test.defaultProps = defaultProps;	// 设置默认props
// 设置props参数类型
Test.propTypes = {
	name: PropTypes.string,
	age: PropTypes.number,
	sex: PropTypes.string,
	list: PropTypes.array
};

export default Test;

prop-types可以检测的数据类型

	optionalArray: PropTypes.array,
	optionalBool: PropTypes.bool,
	optionalFunc: PropTypes.func,
	optionalNumber: PropTypes.number,
	optionalObject: PropTypes.object,
	optionalString: PropTypes.string,
	optionalSymbol: PropTypes.symbol,

猜你喜欢

转载自blog.csdn.net/wang19970228/article/details/95236345