react中props详解

1.props的基本使用

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

代码展示：

export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h3>我是Parent组件</h3>
				<A name="张三" age={20} sex="男"></A>
			</div>
		)
	}
}

class A extends Component {
	render() {
		const {name,age,sex} = this.props
		return (
			<div className="a">
				<h3>我是A组件</h3>
				<ul>
					<li>姓名：{name}</li>
					<li>年龄：{age}</li>
					<li>性别：{sex}</li>
				</ul>
			</div>
		)
	}
}

执行结果：

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

2.对props进行限制

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

代码如下：

import PropTypes from 'prop-types';
export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h3>我是Parent组件</h3>
				<A age={20} sex={1}></A>
			</div>
		)
	}
}
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 (
			<div className="a">
				<h3>我是A组件</h3>
				<ul>
					<li>姓名：{name}</li>
					<li>年龄：{age}</li>
					<li>性别：{sex}</li>
					<li>爱好：{hobbies}</li>
				</ul>
			</div>
		)
	}
}

执行结果：

从执行结果可以看出，对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 render={(data) => }>

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

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

具体代码如下：

import React, { Component } from 'react'
export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h3>我是Parent组件</h3>
				<A render={(name)=><B name={name}/>}/>
			</div>
		)
	}
}
class A extends Component {
	state = {name:'tom'}
	render() {
		const {name} = this.state
		return (
			<div className="a">
				<h3>我是A组件</h3>
				{this.props.render(name)}
			</div>
		)
	}
}

class B extends Component {
	render() {
		console.log('B--render');
		return (
			<div className="b">
				<h3>我是B组件,接收来自A组件的{this.props.name}</h3>
			</div>
		)
	}
}

执行结果：

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