react中组件通信---函数式组件父子组件传参和props验证

目录

react中的组件通信

1.父组件传参给子组件（函数组件）

2.关于props属性值的验证

3.子组件传参给父组件（函数组件）

---

react中的组件通信

在React中，常用的组件通信方式有以下几种：

1. 父组件向子组件通信：可以通过 props 方式传递数据；也可以通过 ref 方式传递数据；

2. 子组件向父组件通信：子组件通过回调函数向父组件传递数据，父组件可以在回调函数中处理接收到的数据；

3. 兄弟组件通信：如果两个兄弟组件没有直接的父子关系，可以通过将它们的共同状态提升到它们的最近共同父组件中，然后通过props将数据传递给兄弟组件。

4. 使用Context API：Context API允许在组件之间共享数据，而不必通过props手动传递。可以在父组件中创建一个Context对象，然后在子组件中通过Context.Provider提供数据，子组件可以通过Context.Consumer或useContext钩子函数来接收数据。

本文重点介绍父子组件间的通信和props。

---

1.父组件传参给子组件（函数组件）

在父组件页面：

1）由于是函数组件，所以需要先引入useState；还要引入子组件

import React,{ useState } from 'react'
import Child1 from './component/Child1'

2）通过hooks声明的useState来在存放一个变量(num),setNum来设置要传递给子组件的值

let [num,setNum]=useState(10)

3）在父组件中将要传给子组件的值绑定在子组件标签上

return (
    <div>
      <h1>父组件</h1>
      <hr></hr>
      {/* 写入子组件标签 */}
      <Child1 num1={num}></Child1>
    </div>
  )

在子组件页面：

1）要在子组件的函数上先接收props参数

export default function Child1(props) {}

2）在子组件中解构父组件传递的值，并使用

export default function Child1(props) {
    let { num1 } = props  // 解构
    return (
        <div>
            <p>父组件传递的值：{num1}</p>
        </div>
    )
}

---

2.关于props属性值的验证

1）有时候别人在使用我们封装好的组件的时候，传递值和我们预期的值可能会不一样。这样就会导致报错，而为了能够让用户快速的找到报错的原因及时修改，我们往往要对我们接收的props参数进行验证。

2）props 校验的步骤如下：

① 安装 prop - types 第三方包

# 使用npm安装
npm i prop-types
# 使用yarn安装
yarn add prop-types

②在需要使用验证的组件中导入 prop-types 包

import propTypes from 'prop-types'

③使用组件名.propTypes = {} 来给组件的props添加校验规则，基本使用示例如下

// 1. 导入prop-types第三方包
import propTypes from 'prop-types'
function Child(props) {
return (
<div>
<h1>子组件</h1>
<span>{ props.msg }</span>
</div>
)
}
// 2. 通过组件名.props添加校验规则
Child.propTypes = {
// 约束msg的值为string类型
msg: propTypes.string
}
export default Child;

④props属性值的约束规则：

• 常见类型：array、bool、func、number、object、string
• React元素类型：element
• 必填项：isRequired
• 特定结构的对象：shape({ })

⑤props约束规则示例

Child.propTypes = {
// 常见类型
fn: propsType.func,
// 必须填
arr: propType.array.`isRequired`,
// 特定结构的对象
// 要求person必须是一个对象，对象中必须包含name属性和age属性，值分别为string
类型和number类型
perspn: propTypes.shape({
name: propTypes.string,
age: propTypes.number
})
}

⑥props属性的默认值：

• 有的时候我们为了让我们的组件使用起来更方便，需要给组件设置默认值，即在不传递该属性时生效，传递后以传递的值为准
• 语法格式：组件名.defaultProps

// 给msg属性设置默认值
Child.defaultProps = {
    msg: '我是msg的默认值'
}

---

3.子组件传参给父组件（函数组件）

 在父组件页面：

1）在父组件中定义一个接收子组件数据的回调函数

let getchildnum=(num)=>{
    console.log(num);  // num就是子组件传递过来的数据
  }

2）在子组件的标签上绑定一个自定义属性，将回调函数传递给子组件

<Child1 getdata={getchildnum}></Child1>

在子组件页面：

1）在子组件中定义一个事件，来触发数据传递

<button onClick={()=>{send()}}>点击进行子传父</button>

2）在子组件中使用父组件的回调函数，实现子传父，完整代码如下：

export default function Child1(props) {
    let [num, setNum] = useState(100)

    // 在子组件中调用父组件的自定义属性
    let send=()=>{
        props.getdata(num)
    }
    return (
        <div>
            <h2>子组件</h2>
            <button onClick={()=>{send()}}>点击进行子传父</button>
        </div>
    )
}