React函数组件中如何通过子组件将父组件数据传递到孙组件？能否使用useEffect？

一、父组件通过中间子组件传值到孙组件的常用方案 #

最常规的实现是Props透传，不需要额外引入API，实现逻辑如下：

• 父组件用useState声明需要传递的状态，直接通过Props传递给中间子组件
• 中间子组件如果不需要消费该数据，原样将对应Props传递给孙组件即可，无需额外处理
• 孙组件接收Props后可直接使用父组件传来的原始数据

示例代码：

// 父组件
import { useState } from 'react'
import Child from './Child'

const Parent = () => {
  // 定义要传递给孙组件的状态
  const [parentData, setParentData] = useState("父组件的原始数据")
  return (
    <div>
      {/* 把数据传给中间子组件 */}
      <Child passData={parentData} />
    </div>
  )
}
export default Parent

// 中间子组件 Child.jsx
import GrandChild from './GrandChild'

const Child = (props) => {
  // 不需要消费数据的话直接透传即可，也可以用{...props}批量透传所有参数
  return <GrandChild passData={props.passData} />
}
export default Child

// 孙组件 GrandChild.jsx
const GrandChild = (props) => {
  // 直接拿到父组件传递的数据
  return <div>收到的父组件数据：{props.passData}</div>
}
export default GrandChild

如果你的项目跨层级传值的场景很多，也可以用createContext+useContext的方案实现数据下发，不需要逐层透传Props。

二、是否可以使用useEffect() #

可以使用，但不是必选项，仅在特定场景需要用到

• 如果只是纯渲染父组件传递的数据，不需要用useEffect，直接读取Props渲染即可
• 如果孙组件需要在父组件传递的数据变化时，执行副作用逻辑（比如触发接口请求、更新孙组件本地状态、操作DOM等），就可以把传过来的Props作为useEffect的依赖项，触发对应逻辑

useEffect使用示例：

// 孙组件
import { useState, useEffect } from 'react'

const GrandChild = (props) => {
  const [processedData, setProcessedData] = useState("")

  // 父组件传递的数据变化时，触发副作用逻辑
  useEffect(() => {
    // 可执行数据加工、接口请求等逻辑
    setProcessedData(`加工后的数据：${props.passData}`)
  }, [props.passData]) // 把父组件传的参数设为依赖项

  return <div>{processedData}</div>
}
export default GrandChild

注意不要滥用useEffect：如果只是为了把Props赋值给本地状态直接渲染，不需要多走一层useEffect，容易出现状态不同步的问题。

内容的提问来源于stack exchange，提问作者Malek