react父子组件传值方式一之props方法

父组件

import React, { useState, useEffect, memo, useMemo, createContext, useCallback, useReducer, useContext } from 'react';
import Counter from './four';
export function Three(props) {
  const [clval, setClval] = useState(null)
  const getChildrenValue = (value) => {
    console.log('value父', value);
　　// 获取子组件传过来的value值并设置到clval，val参数就是子组件的value值
    setClval(value)
  }
  return (
    <div>
      {clval}
　　{/* 这里是重要代码，向子组件传递getValue这个prop，它的值是一个回调函数 */}
      <Counter getValue={getChildrenValue}></Counter>
    </div>
  );
}

Counter子组件

import React, { useState, createContext, useContext } from 'react';
function Counter(props) {
  const [value, setValue] = useState("我是三级子组件");
  const toparent = () => {
    console.log('我是儿子', props)
　　// 向父组件传递每次递增的value值
    props.getValue(value)
  }
  return (
    <div>
      222

  {/* <button onClick={() => toparent()}>我是子组件</button> */}

      <button onClick={toparent}>我是子组件</button>

    </div>
  )
}
export default Counter

 

参考的https://blog.csdn.net/m0_38134431/article/details/118489375