如何从父组件调用子组件的setDisabled方法？

场景说明 #

现有React子组件ChildButton，内部用useState定义了disabled状态和对应的setDisabled修改方法；父组件Parent需要在controllSetStateFun函数里调用子组件的setDisabled，触发子组件重新渲染。

原组件代码如下：

子组件ChildButton #

const ChildButton = () => {
  const [disabled, setDisabled] = useState(false);

  return <div onClick={disabled ? null : () => console.log('do something')} />
}

父组件Parent #

import ChildButton from './ChildButton';

const Parent = () => {
  const controllSetStateFun = () => {
    // 调用子组件的setDisabled以触发子组件重新渲染
  };

  return (
    <div>
     <ChildButton />
    </div>
  );
}

解决方案 #

方案一：受控组件（推荐，符合React单向数据流） #

把子组件的状态提升到父组件管理，通过props把状态传给子组件，这是React的标准实践。

修改后的子组件：

const ChildButton = ({ disabled }) => {
  return <div onClick={disabled ? null : () => console.log('do something')} />
}

修改后的父组件：

import ChildButton from './ChildButton';
import { useState } from 'react';

const Parent = () => {
  // 父组件接管disabled状态
  const [disabled, setDisabled] = useState(false);

  const controllSetStateFun = () => {
    // 直接调用父组件的setDisabled，子组件会自动更新
    setDisabled(true);
  };

  return (
    <div>
     <ChildButton disabled={disabled} />
    </div>
  );
}

这种方式遵循单向数据流，状态统一由父组件管理，子组件只负责渲染，逻辑更清晰，后期维护也更方便。

方案二：用useRef直接调用子组件方法（特殊场景可用） #

如果必须直接操作子组件内部方法，可以通过forwardRef和useImperativeHandle把子组件的方法暴露给父组件。

修改后的子组件：

import { useState, forwardRef, useImperativeHandle } from 'react';

// 使用forwardRef让子组件接收父组件传过来的ref
const ChildButton = forwardRef((props, ref) => {
  const [disabled, setDisabled] = useState(false);

  // 把setDisabled方法暴露给父组件的ref
  useImperativeHandle(ref, () => ({
    setDisabled
  }));

  return <div onClick={disabled ? null : () => console.log('do something')} />
});

export default ChildButton;

修改后的父组件：

import ChildButton from './ChildButton';
import { useRef } from 'react';

const Parent = () => {
  const childBtnRef = useRef(null);

  const controllSetStateFun = () => {
    // 通过ref调用子组件暴露的setDisabled方法
    childBtnRef.current?.setDisabled(true);
  };

  return (
    <div>
     <ChildButton ref={childBtnRef} />
    </div>
  );
}

注意：这种方式打破了React的单向数据流，会让组件间的依赖关系变得隐蔽，除非特殊需求，优先选择方案一。

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