初识React(day10)

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

上一篇文章我们介绍受控组件在表单里面的应用以及非受控组件的使用方法和使用步骤，接下来将介绍组件之间的通讯以及props传值

组件的props介绍

• 组件是封闭的，要接收外部数据应该通过props来实现
• props的作用：接收传递给组件的数据
• 传递数据：给组件标签添加属性
• 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
• 示例代码如下所示：

<Hello name="jack"age={19}/
function Hello(props){
console.log(props)
return
<div>接收到数据：{props.name}</div>


class Hello extends React.Component
render ()
return
<div>接收到的数据：{this.props.age}</div>
}
}
<Hello name="jack"age={19}/

• Props的特点：可以给组件传递任意类型的数据 props是只读的对象，只能读取属性的值，无法修改对象，注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props!，示例代码如下所示：

class Hello extends React.Component
constructor(props){
//推荐将orops传递给父类构造函数
super(prop
render(){
return<div>接收到的数据：{this.props.age}</div>

组件之间通讯的三种方式

1. 父组件传递数据给子组件

• 父组件提供要传递的state数据
• 给子组件标签添加属性，值为state中的数据
• 子组件中通过props接收父组件中传递的数据
• 示例代码如下所示：

class Parent extends React.Component
state =lastName:'
render(){
return
<div>
传递数据给子组件：<Child name=(this.state.lastName}/>
</div>
function Child(props){
return<div>子组件接收到数据：{props.name}</div>

之后还有子组件传递数据给父组件的介绍