不使用ContextAPI或Redux时如何触发兄弟组件内的函数

方案1：状态提升（优先推荐） #

这是符合React单向数据流规范的实现方式，完全不需要额外工具，逻辑清晰易维护。

父组件实现 #

import { useState } from 'react'
import FormComponent from './FormComponent'
import TableComponent from './TableComponent'

function ParentComponent() {
  // 刷新标记仅需要感知变化，具体值不影响逻辑
  const [tableRefreshFlag, setTableRefreshFlag] = useState(0)

  return (
    <>
      <FormComponent onSubmitSuccess={() => setTableRefreshFlag(prev => prev + 1)} />
      <TableComponent refreshFlag={tableRefreshFlag} />
    </>
  )
}

Form组件修改 #

function FormComponent({ onSubmitSuccess }) {
  const submitForm = () => {
    // 原有表单提交逻辑
    // ...
    // 提交完成后触发回调
    onSubmitSuccess()
  }
}

Table组件修改 #

import { useEffect } from 'react'
function TableComponent({ refreshFlag }) {
  const updateTable = () => {
    // 原有表格更新逻辑
    // do some state here
  }

  // 监听刷新标记变化，自动执行更新方法
  useEffect(() => {
    updateTable()
  }, [refreshFlag])
}

方案2：useImperativeHandle + forwardRef 直接暴露组件方法 #

适合Table内部逻辑复杂，不方便把更新逻辑提取到父层的场景。

Table组件修改 #

import { forwardRef, useImperativeHandle } from 'react'
// 用forwardRef包裹组件才能接收外部传入的ref
const TableComponent = forwardRef((props, ref) => {
  const updateTable = () => {
    // 原有表格更新逻辑
    // do some state here
  }

  // 对外暴露指定方法
  useImperativeHandle(ref, () => ({
    updateTable
  }))

  // 原有Table渲染逻辑
  return <div>表格内容</div>
})

父组件实现 #

import { useRef } from 'react'
import FormComponent from './FormComponent'
import TableComponent from './TableComponent'

function ParentComponent() {
  // 绑定Table组件实例的ref
  const tableRef = useRef(null)

  return (
    <>
      <FormComponent tableRef={tableRef} />
      <TableComponent ref={tableRef} />
    </>
  )
}

Form组件修改 #

function FormComponent({ tableRef }) {
  const submitForm = () => {
    // 原有表单提交逻辑
    // ...
    // 直接调用Table暴露的更新方法，可选链避免ref未初始化报错
    tableRef.current?.updateTable()
  }
}

方案选型建议 #

• 优先选择方案1：没有直接操作组件实例，后续需求迭代时更易排查问题，适配性更强
• 方案2适合临时快速实现的场景，注意不要滥用ref直接操作组件内部逻辑，避免后续数据流混乱

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