React属性之→props的使用

1.组件与props

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。 

2.props的只读属性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。但是，我们可以通过==》state属性，来进行动态修改。

3.props的基本使用

export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h3>我是Parent组件</h3>
				<children name="demon" age={20} sex="魔鬼"></children>
			</div>
		)
	}
}

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

在父组件（parent）中，我们可以在子组件渲染里插入我们需要传递给子组件（children）的参数等，这样，在子组件中，传递的数就挂载在组件的实例自身上，类组件通过==》this.props.传递名，获取到需要的值。（注意在render里要运用jsx语法插入，比如{this.props.name},也可先解构赋值来方便操作）

4.props进行限制

一.下载‘prop-types’工具包

npm i prop-types

二.在相应组件你引入该工具包

import PropTypes from 'prop-types'

三.限制属性

Person.propTypes = {
  name: PropTypes.string.isRequired,
  sex:PropTypes.string,
  age:PropTypes.number
};

具体可以去听尚硅谷-天宇男神的react讲解，非常通俗易懂的让您明白，强烈推荐。