react中props详解

您所在的位置：网站首页 › prop和props › react中props详解

react中props详解

#react中props详解| 来源: 网络整理| 查看: 265

1.props的基本使用

react组件之间的传值，是离不开props的

代码展示：

export default class Parent extends Component { render() { return ( 我是Parent组件 render() { const {name,age,sex} = this.props return ( 我是A组件姓名：{name} 年龄：{age} 性别：{sex} ) } }

执行结果：在这里插入图片描述

子组件可通过this.props拿到父组件传递过来的参数

2.对props进行限制

react中使用prop-types对props的值的类型进行校验

代码如下：

import PropTypes from 'prop-types'; export default class Parent extends Component { render() { return ( 我是Parent组件 1}> ) } } class A extends Component { static propTypes = { name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 }; static defaultProps = { hobbies:"看电视", }; render() { const {name,age,sex} = this.props return ( 我是A组件姓名：{name} 年龄：{age} 性别：{sex} 爱好：{hobbies} ) } }

执行结果：在这里插入图片描述

从执行结果可以看出，对A接收的name做必传限制，和age类型做number限制，如果父组件不传name，并且age数值类型不传number，控制台就会报错提示。并且子组件可以指定默认的props。

3.children props

react使用children props: 通过组件标签体传入结构

对于这个知识，请参考这篇文章https://www.jianshu.com/p/d1975493b5ea/

4.render props

react中使用render props: 通过组件标签属性传入结构, 一般用render函数属性

A组件: {this.props.render(内部state数据)}

C组件: 读取A组件传入的数据显示 {this.props.data}

具体代码如下：

import React, { Component } from 'react' export default class Parent extends Component { render() { return ( 我是Parent组件 name}/>}/> ) } } class A extends Component { state = {name:'tom'} render() { const {name} = this.state return ( 我是A组件 {this.props.render(name)} ) } } class B extends Component { render() { console.log('B--render'); return ( 我是B组件,接收来自A组件的{this.props.name} ) } }

执行结果：

在这里插入图片描述

通过执行结果可以发现，B组件处于A组件之中，并且成功的拿到了name属性。

【本文地址】

react中props详解

react中props详解

今日新闻

推荐新闻