1.类式组件props基本数据读取与解构运算符传递
<script type="text/babel">// 创建组件class PersonalInfo extends React.Component {render() {// 读取props属性 并读取值console.log('props',this.props);return(<ul><li>姓名：{this.props.name}</li><li>性别：{this.props.gender}</li><li>年龄：{this.props.age}</li></ul>) }}// 渲染组件const p ={name:'岂不闻',gender:'男',age:'24'}// 展开运算符 解构赋值 babel+react 解构运算符 仅使用与标签中数据传递ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>
2.类式组件propTypes校验props传递数据规则
propTypes是react提供的一种工具，对于组件的props进行类型检查
2.1 html引入prop-types.js
<!-- {/* // 引入 PropTypes */} --><script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>2.2 react脚手架引入
npm install prop-types2.3 propTypes验证器声明类型
基本数据类型
PropTypes.string：字符串
PropTypes.number：数字
PropTypes.boolean：布尔值
PropTypes.object：对象
PropTypes.array：数组
PropTypes.func：函数
PropTypes.symbol：Symbol特殊类型
PropTypes.node：任何可以被渲染的内容：数字、字符串、元素或数组（包括这些类型）
PropTypes.element：React元素
PropTypes.instanceOf(Class)：某个类的实例组合类型
PropTypes.oneOf(['option1', 'option2'])：枚举类型，值必须是所提供选项之一
PropTypes.oneOfType([PropTypes.string, PropTypes.number])：多个类型中的一个
PropTypes.arrayOf(PropTypes.number)：某种类型组成的数组
PropTypes.objectOf(PropTypes.number)：某种类型组成的对象
PropTypes.shape({ key: PropTypes.string, value: PropTypes.number })：具有特定形状的对象2.4具体代码例子
指定标签默认属性
// 指定标签默认属性PersonalInfo.defaultProps = {name: '未知',gender: '未知',age: 0}props传递限制传递数据规则
PersonalInfo.propTypes = {// 限定为字符串类型 必填项name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}扩展运算符批量传入
// 渲染组件const p ={name:'岂不闻',gender:'男',age:'24'}// 展开运算符 解构赋值 babel+react 解构运算符 仅使用与标签中数据传递ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))整体代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test1"></div><!-- 容器 --><div id="test2"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 PropTypes */} --><script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script><script type="text/babel">// 创建组件class PersonalInfo extends React.Component {render() {// 读取props属性 并读取值console.log('props',this.props);const {name,gender,age} = this.props;return(<ul><li>姓名：{name}</li><li>性别：{gender}</li><li>年龄：{age}</li></ul>) }}// 指定标签默认属性PersonalInfo.defaultProps = {name: '未知',gender: '未知',age: 0}// props传递限制传递数据规则PersonalInfo.propTypes = {// 限定为字符串类型 必填项name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}// 渲染组件const p ={name:'岂不闻',gender:'男',age:'24'}// 展开运算符 解构赋值 babel+react 解构运算符 仅使用与标签中数据传递ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>
</body></html>3.类式组件props的简写方式 （static 关键字）
<script type="text/babel">// 创建组件class PersonalInfo extends React.Component {// 指定标签默认属性static defaultProps = {name: '未知',gender: '未知',age: 0}// props传递限制传递数据规则static propTypes = {// 限定为字符串类型 必填项name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}render() {// 读取props属性 并读取值console.log('props',this.props);const {name,gender,age} = this.props;return(<ul><li>姓名：{name}</li><li>性别：{gender}</li><li>年龄：{age}</li></ul>) }}// 渲染组件const p ={name:'岂不闻',gender:'男',age:'24'}// 展开运算符 解构赋值 babel+react 解构运算符 仅使用与标签中数据传递ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>4.函数式组件props的使用
<script type="text/babel">// 指定标签默认属性PersonalInfo.defaultProps = {name: '未知',gender: '未知',age: 0}// props传递限制传递数据规则PersonalInfo.propTypes = {// 限定为字符串类型 必填项name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}// 函数式组件function PersonalInfo(props){// 解构赋值const {name,gender,age} = props;return(<ul><li>姓名：{name}</li><li>性别：{gender}</li><li>年龄：{age}</li></ul>) }// 组件渲染ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>
