React-05React中props属性（传递数据），propTypes校验，类式与函数式组件props的使用

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-types

2.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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/77258.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！