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

最新推荐文章于 2025-04-09 08:00:00 发布

sakuraxiaoyu

最新推荐文章于 2025-04-09 08:00:00 发布

阅读量697

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_40830369/article/details/125753360

版权

web前端同时被 2 个专栏收录

79 篇文章

订阅专栏

react hooks

4 篇文章

订阅专栏

本文介绍了在React Hooks环境下，如何从子组件向父组件传递值。通过在父组件中定义useState并传递给子组件，子组件通过回调函数将值返回给父组件，以此实现数据的传递。这种方法避免了直接暴露setState带来的潜在问题，并提供了一种更可控的通信方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件如何优雅得向父组件传值（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;