[JavaScript知识库]【React】函数式组件传值

父组件传值给子组件

export const Farther = () => {
    const msg = "大家好呀";
    const value = "I'm JavaScript";
    return (
        <div>
            <span>我是父亲组件</span>
            <Son msg={msg} value={value}/>
        </div>
    )
}

// props 是父组件传给字段的一个对象，里面包含了要传的所有值
/*
	例如：此时的props的结构相当于：
	{
		msg: "大家好呀",
		value: "I'm JavaScript",
	}
*/
export const Son = (props)=>{
	// 也可以通过解构对象直接取出值
	const { value } = props;
    return (
        <div>
            <span>我是孩子组件: 这是我从父组件接收到的值：{props.msg}{value}</span>
        </div>
    )
}

子组件传值给父组件

import React, { useState} from 'react';
export const Farther = () => {
    const [fartherCount, setFartherCountt] = useState<number>(0);
 	
    const getSonCount = (val: number) => {
      // 获取子组件传过来的值，并用setFartherCountt进行存储
      setParentCountt(val);
    };
    return (
        <div>
            <span>我是父亲组件</span>
            // 传递一个方法给子组件，这样父组件和子组件调用的就是同一个方法
            <Son getCount={getSonCount} />
        </div>
    )
}

export const Son = (props)=>{
	const [sonCount, setSonCountt] = useState<number>(9);
	const uploadCount = () => {
	  // 调用父组件的方法，将值当参数传给getSonCount函数
      props.getCount(sonCount);
    };
    return (
        <div>
            <button onClick={() => uploadCount()}>点击子组件后传值</button>
        </div>
    )
}

超强干货来袭

云风专访：近40年码龄，通宵达旦的技术人生