react基础-传参父到子父组件通过props向子组件内注入参数，子组件内通过props对象进行接受。理论上pro

父到子

const Children = (props: any) => {
    const { name } = props
return (
    <div className="children">this is children {name}</div>
)
}
export default Children

import Children from "./children";

const Parent = () => {
    const name = 'this is params'  // string
    return (
        <div className="parent">
            this is parent
        <Children name={name} />
        </div>
    )
} 
export default Parent;

父组件通过props向子组件内注入参数，子组件内通过props对象进行接受。

理论上props可以传递任意类型的数据

import Children from "./children";

const Parent = () => {
    const name = 'zhangsan'  // string
    const age = 18 // number
    const graduate = false // boolean
    const address = {
        province: 'shanxi',
        city: 'taiyuan',
        county: 'xiaodian'
    } // object
    const childJSX = (
        <span>这是传递给子组件的 JSX 代码</span>
    ); // jsx
    return (
        <div className="parent">
            this is parent
            <Children 
            name={name} 
            age={age} 
            graduate={graduate}
            address={address}
            child={childJSX}
            />
        </div>
    )
}
export default Parent;

const Children = (props: any) => {
    const { name, age, graduate, address: {province, city, county}, child } = props
    return (
        <div className="children">
            this is children
            <ul>
                <li>name: {name}</li>
                <li>age: {age}</li>
                <li>graduate: {graduate?'yes':'no'}</li>
                <ol>
                    <li>province: {province}</li>
                    <li>city: { city}</li>
                    <li>county: { county}</li>
                </ol>
                <li>{child}</li>
            </ul>
        </div>
    )
}
export default Children

总结父组件传递参数到子组件的步骤：

父组件定义参数，并挂载到子组件
子组件内部通过props接收, 并应用

子到父

子组件传递参数到父组件，我们的思路其实很简单：父组件通过props将一个函数传递给子组件，子组件内部进行调用并将数据传递进去，从而实现参数的上传。

我们继续用上面的组件进行实现, 在子组件内定义一个id, 点击的时候传递到父组件

import { useState } from "react";
import Children from "./children";

const Parent = () => {
   
    const [childId, setChildId] = useState('')
    const getId = (id) => {
        setChildId(id)
    }
    return (
        <div className="parent">
            this is parent
            {childId}
            <Children 
            getId={getId}
            />
        </div>
    )
}
export default Parent;

const Children = (props: any) => {
    const id = '123456'
    return (
        <div className="children">
            <span onClick={() => props.getId(id)}>this is children</span>
        </div>
    )
}
export default Children

总结子组件传递参数到父组件的步骤

父组件定义回调函数并传入子组件
子组件在对应的时机调用props接收的函数，并传入需要传递到父组件的参数

跨层传参

使用了 React 的 createContext 和 useContext API，可以在组件之间创建共享数据的上下文环境。

我们定义A\B\C三个组件层级嵌套，从组A传递参数，下面两集组件接收

import { createContext, useContext } from 'react' 

const context = createContext('default value')

const A = () => {
    return (
        <div>
            A
            <context.Provider value={'from a'}>
                <B />
            </context.Provider>
        </div>
    )
}
const B = () => {
    const value = useContext(context)
    return (
        <div>
            B{value}
            <C />
        </div>
    )
}
const C = () => {
    const value = useContext(context)
    return (
        <div>
            C{value}
        </div>
    )
}

export default  A

使用 createContext 创建一个上下文对象 context。它接受一个默认值 default Value，当没有提供值时，该默认值将用作上下文的值。
Provider 是上下文对象的提供者，它允许你覆盖默认值并为上下文提供一个新值。在组件 A 中，使用 <context.Provider value={'from a'}> 来设置上下文中的值为 from a。这意味着组件 B 和 C 可以通过使用 useContext(context) 读取和使用这个值。

总结步骤

调用creatContext钩子创建一个上下文，传入默认值，也可以不传
使用上下文上的Provider包含需要传参数的子组件，此处可以进行值的覆盖
在下级组件中调用useContext钩子并传入上下文来获取上级传递下来的参数

平级传参

兄弟组件之间传参，可以使用状态提升，也就是通过父组件实现两个组件之间数据的中转

我们还是定义A\B\C三个组件，B\C平级, 点击B组件，将id传递到C组件

import { useState } from "react"


const A = () => {
    const [BID, setBID] = useState(null)
    const getId = id => {
        setBID(id)
    }
    return (
        <div>
            A
            <B getId={getId} />
            <C BID={BID}/>
        </div>
    )
}
const B = props => {
    const id = '2423'
    return (
        <div onClick={() => { props.getId(id) }}>
            B
        </div>
    )
}
const C = (props) => {

    return (
        <div>
            C{props.BID}
        </div>
    )
}

export default  A

兄弟组件之间传参数的步骤

共同父组件定义一个取参的函数，并传入提供参数的子组件
子组件内调用函数，传入参数
父组件中函数体：获取到参数后更新到其他子组件