React中如何将props从A组件传递到C组件并接收C返回的参数

问题原因 #

你现有代码的问题主要有两个：

• C组件直接在组件顶层执行sendData(argument)，会在组件渲染时就自动执行，而且你没有定义argument变量，会直接报引用错误
• 如果想要在特定时机（比如点击按钮、输入内容变化时）传递参数给A组件，需要把函数调用绑定到对应事件触发，不能直接写在组件顶层

修正方案 #

我们以点击按钮触发传参的场景为例，完整可运行的代码如下：

A组件代码

import React from 'react'
import B from './B'

const A = () => {
  const displayData = (parameter) => {
    // 此处即可拿到C组件传过来的参数
    console.log('收到C组件传递的参数：', parameter)
  }
  return (
    <div>
      <B sendData={displayData} />
    </div>
  )
}

export default A

B组件代码

import React from 'react'
import C from './C'

// B组件作为中转层透传props即可，原有写法是正确的
const B = ({sendData}) => {
  return (
    <div>
      <C sendData={sendData} />
    </div>
  )
}

export default B

C组件代码

import React from 'react'

const C = ({sendData}) => {
  // 将sendData调用绑定到具体触发逻辑，不要直接写在组件顶层
  const handleClick = () => {
    // 此处替换为你实际要传递的参数
    const param = '我是来自C组件的参数'
    sendData(param)
  }

  return (
    <div>
      <button onClick={handleClick}>点击传递参数给A组件</button>
    </div>
  )
}

export default C

特殊场景补充 #

如果不需要用户交互触发，想要C组件挂载完成后自动传参，可以把调用写到useEffect钩子中：

import React, { useEffect } from 'react'

const C = ({sendData}) => {
  useEffect(() => {
    const param = 'C组件挂载完成自动传递的参数'
    sendData(param)
  }, [sendData])

  return <div></div>
}

export default C

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