React 组件传值,函数传递

---

一.父到子传值

• props可以接收 数字,字符串,布尔,数组,对象,函数,jsx
• 子组件通过props接收父组件的值

代码实现

父组件

• msg 是子组件要接收名称
• 大括号内是要传递的值

import React from "react"
import One from "../../components/One"
export default () => {
    const getMes = () => {
        console.log("我是父组件的函数");
    }
    return (
        

            
home
            

 			
        
    )
}

子组件

• 使用解构赋值,对props解构

import React from "react";
export default ({msg,getMes})=>{

    return  (
        

            
我是子组件A
            

                
接收父组件的值:{msg}
                触发父组件函数
            
        
    )
}

页面展示

二.子到父传值

• 子组件调用父组件传递过来的函数,并且把想要传递的数据当成函数的实参

代码实现

子组件

export default ({  childrenClick }) => {
    return (
        

            
我是子组件A
            

                 childrenClick("我是子组件中的数据")}>触发子组件函数
            
        
    )
}

父组件

import One from "../../components/One"
export default () => {
    const getSon = (val) => {
        console.log("父页面",val);
    }
    return (
        

            
home
            

             getSon(val)} />
        
    )
}

页面展示

三.兄弟传值

• 同页面之间兄弟组件传值
• 把子组件A中的数据传递给子组件B
• 先把A组件的数据子传父给父组件,在通过父传子给B组件

代码实现

父组件

import React,{useState} from "react"

import One from "../../components/One"
import Two from "../../components/Two"
export default () => {
 const [num, setNum] = useState(0);
    return (
        

            
home
            

             setNum(val)} />
            

            
        
    )
}

组件A

import React,{useState} from "react";
export default ({ childrenClick }) => {
    const [count, setCount] = useState(0);
    const brother = () => {
        setCount(count + 1)
        childrenClick(count + 1)
    }
    return (
        

            
我是子组件A
            

                 brother()}>传值B组件函数:{count}
            
        
    )
}

组件B

export default ({ num }) => {
    return (
        

            
我是子组件B
            

                
接收A组件的值:{num}
            
        
    )
}

页面展示