1.类式组件props基本数据读取与解构运算符传递
javascript
<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
javascript
<!-- {/* // 引入 PropTypes */} -->
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>2.2 react脚手架引入
javascript
npm install prop-types2.3 propTypes验证器声明类型
基本数据类型
javascript
PropTypes.string：字符串
PropTypes.number：数字
PropTypes.boolean：布尔值
PropTypes.object：对象
PropTypes.array：数组
PropTypes.func：函数
PropTypes.symbol：Symbol特殊类型
javascript
PropTypes.node：任何可以被渲染的内容：数字、字符串、元素或数组（包括这些类型）
PropTypes.element：React元素
PropTypes.instanceOf(Class)：某个类的实例组合类型
javascript
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具体代码例子
指定标签默认属性
javascript
// 指定标签默认属性
PersonalInfo.defaultProps = {
name: '未知',
gender: '未知',
age: 0
}props传递限制传递数据规则
javascript
PersonalInfo.propTypes = {
// 限定为字符串类型 必填项
name: PropTypes.string.isRequired,
gender: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
}扩展运算符批量传入
javascript
// 渲染组件
const p ={name:'岂不闻',gender:'男',age:'24'}
// 展开运算符 解构赋值 babel+react 解构运算符 仅使用与标签中数据传递
ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))整体代码
html
<!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 关键字）
javascript
<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的使用
javascript
<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>