React中如何在父组件内修改子组件的state状态？

这里提供两种可行实现方案，优先推荐第一种符合React设计规范的方案：

方案1：状态提升（官方首选推荐） #

把原本定义在子组件内部的state移动到父组件定义，再通过props传递给子组件使用，符合React单向数据流设计，维护成本最低。
父组件代码示例：

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

const Parent = () => {
  // 子组件要用的状态提到父层定义
  const [childState, setChildState] = useState(null)

  // 父组件内部可以直接修改该状态
  const handleOperate = () => {
    setChildState(1)
    // 其他业务逻辑
    setChildState(2)
  }

  return (
    <>
      <button onClick={handleOperate}>触发状态更新</button>
      {/* 通过props把状态和更新方法传给子组件 */}
      <ChildComponent state={childState} setState={setChildState} />
    </>
  )
}

子组件代码示例：

// 子组件
const ChildComponent = ({state, setState}) => {
  // 子组件内部直接使用父组件传过来的状态和更新方法即可，不需要单独定义useState
  // 子组件内部也可以调用setState主动更新状态
  return <div>当前子组件状态：{state}</div>
}

方案2：useImperativeHandle + forwardRef（特殊场景使用） #

如果状态确实需要保留在子组件内部，不想提升到父层，可以用该方案把子组件的状态更新方法暴露给父组件调用。
子组件代码示例：

// 子组件
import { forwardRef, useImperativeHandle, useState } from 'react'

// 用forwardRef包裹子组件，接收父组件传递的ref
const ChildComponent = forwardRef((props, ref) => {
  const [state, setState] = useState(null)

  // 把要暴露给父组件的方法注册到ref上
  useImperativeHandle(ref, () => ({
    setChildState: setState
  }))

  return <div>当前子组件状态：{state}</div>
})

父组件代码示例：

// 父组件
import { useRef } from 'react'
import ChildComponent from './ChildComponent'

const Parent = () => {
  // 定义ref绑定到子组件
  const childRef = useRef(null)

  const handleOperate = () => {
    // 通过ref调用子组件暴露的状态更新方法
    childRef.current?.setChildState(1)
    // 其他业务逻辑
    childRef.current?.setChildState(2)
  }

  return (
    <>
      <button onClick={handleOperate}>触发状态更新</button>
      <ChildComponent ref={childRef} />
    </>
  )
}

注意：方案2属于打破单向数据流的特殊用法，非必要不推荐使用，避免后期出现数据流混乱难以调试的问题。

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