什么是props？
官网上是这么解释的：When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”. 意思为： 当React看到表示用户定义组件的元素时，它会将JSX属性作为单个对象传递给此组件。我们称这个对象为“props。
顾名思义，props就是属性的简写，是单个值，是在父组件中定义或已经在state中的值，并将这些值传递给其子组件。props本身不可变，但可以通过触发state的变化，反过来改变props本身的值。
props的作用
作用：用于接收组件外部的数据 传递数据： 通过给组件标签添加属性 接收数据：函数组件通过 参数 props接收数据，类组件通过 this.props接收数据
props的特点
- 可以给组件传递任意类型的数据
- props是只读属性，不能对值进行修改
- 使用类组件时，如果写了构造函数，应该将props传递给super(),否则无法在构造函数中获取到props，其他的地方是可以拿到的
props的应用场景
1，子组件调用父组件的方法
（1）子组件要拿到父组件的属性，需要通过 this.props 方法。
（2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上，
子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。
2，父组件调用子组件的方法
在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样，子组件被设置为 ref 之后（比如 ref=“xxx”）。父组件便可以通过 this.refs.xxx 来获取到子组件了。
类组件中父组件给子组件传递参数
代码语言：javascript复制import React, { Component, Fragment } from "react";
//React的props传参
// 父组件
class App extends Component {
render() {
return (
<Fragment>
<Child name="卡卡罗特"></Child>
</Fragment>
);
}
}
// 子组件
class Child extends Component {
render() {
return <div>{this.props.name}</div>;
}
}
export default App;运行结果
类组件中父组件给子组件传递一个函数
代码语言：javascript复制import React, { Component, Fragment } from "react";
//React的props传参
// 父组件
class App extends Component {
render() {
return (
<Fragment>
<Child name="卡卡罗特" jineng={this.bianshen}></Child>
</Fragment>
);
}
bianshen() {
return "变身超级赛亚人";
}
}
// 子组件
class Child extends Component {
render() {
return (
<div>
{this.props.name}
{this.props.jineng()}
</div>
);
}
}
export default App;运行结果
函数组件中传递数据
代码语言：javascript复制<script type="text/babel">
//props基本使用
function ShowSaiyaren(props){
return (
<div>赛亚人有：{props.a} ---{props.b}</div>
)
}
//使用对象进行传递多个数据
let saiyaren={
a:"卡卡罗特",
b:"贝吉塔"
}
ReactDOM.render(<ShowSaiyaren{...saiyaren} />,document.getElementById("demoReact"));
</script>运行结果
提示：
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props
正常情况下 props 的拥有权不属于当前组件，是别人传给你的，你用的时候用 props 来引用，所以修改的权限应该由上面来决定。
文章内容如有错误，请以官方文档为准
最后想说，文章借鉴了很多大佬的思路，非常感谢大佬们的无私共享！
