子组件如何优雅得向父组件传值

子组件如何优雅得向父组件传值（hooks)

前言：

​ 在react hooks开发中，通常情况下父组件向子组件传值很容易也很直观，一般用props实现即可。但是子组件如何向父组件传值呢？

实操：

​ 子组件向父组件传值得核心思想其实是在父组件这边定义useState()，将该函数下放到子组件，但是state值其实还是在父组件这边进行管理。子组件useState值后，父组件会更新state，即可实现子组件向父组件传值的功能。

import React, { useState } from "react";
import Son from './son';

function Father() {
  const [value, setValue] = useState('value');

  return (
    <>
      <Son 
        setValue={setValue}
        value={value}
      />
    </>
  )
}
export default Father;

import React, { useState } from "react";

function Son(props) {
  const setValue = props?.setValue
  const value = props?.value


  ...



}
export default Son;

​ 上述代码虽然只写了一个简单的过程，但是核心代码也不过如此。

​ 但是直接将setState()暴露给子组件可能会造成一个问题，如果随着子组件一层层的增多，可能会造成state管理混乱，倒时候可能不知道useState哪个值了都。官方推荐的方式是把useState再封装一层，子组件再callBack回来，类似这样：

import React, { useState } from "react";
import Son from './son';

function Father() {
  const [value, setValue] = useState('value');

  function callBackValue(params) {
    setValue(params)
  }

  return (
    <>
      <Son
        callBackValue={callBackValue}
        value={value}
      />
    </>
  )
}
export default Father;

import React, { useState } from "react";

function Son(props) {
  const callBackValue = props?.callBackValue
  const value = props?.value


  ...



}
export default Son;