React中如何通过父组件按钮触发子组件的函数？

要实现父组件保存按钮触发当前激活子组件的onSave逻辑，同时保留子组件内的保存代码，可以通过**forwardRef + useImperativeHandle**结合useRef的方式实现，以下是具体步骤：

1. 修改子组件，暴露onSave方法 #

给每个子组件使用forwardRef包裹，通过useImperativeHandle将内部的onSave方法暴露给父组件：

UserSettings.jsx #

import { forwardRef, useImperativeHandle } from 'react';

const UserSettings = forwardRef((props, ref) => {
  const onSave = () => console.log('user settings saved');

  // 向父组件暴露onSave方法
  useImperativeHandle(ref, () => ({
    onSave
  }));

  return <div>User Settings</div>;
});

// 设置displayName，方便React DevTools识别组件
UserSettings.displayName = 'UserSettings';
export default UserSettings;

FeedSettings.jsx #

import { forwardRef, useImperativeHandle } from 'react';

const FeedSettings = forwardRef((props, ref) => {
  const onSave = () => console.log('feed settings saved');

  useImperativeHandle(ref, () => ({
    onSave
  }));

  return <div>Feed Settings</div>;
});

FeedSettings.displayName = 'FeedSettings';
export default FeedSettings;

PrivacySettings.jsx #

import { forwardRef, useImperativeHandle } from 'react';

const PrivacySettings = forwardRef((props, ref) => {
  const onSave = () => console.log('privacy settings saved');

  useImperativeHandle(ref, () => ({
    onSave
  }));

  return <div>Privacy Settings</div>;
});

PrivacySettings.displayName = 'PrivacySettings';
export default PrivacySettings;

2. 修改父组件，绑定ref并触发子组件方法 #

父组件中创建对应子组件的ref，在保存按钮点击时，根据当前tab值调用对应子组件的onSave方法：

import { useState, useRef } from 'react';
import UserSettings from './userSettings';
import FeedSettings from './feedSettings';
import PrivacySettings from './privacySettings';

const SettingsPage = () => {
  const [tab, setTab] = useState('user');
  
  // 创建三个子组件对应的ref
  const userRef = useRef(null);
  const feedRef = useRef(null);
  const privacyRef = useRef(null);

  // 处理保存按钮点击事件
  const handleSave = () => {
    switch (tab) {
      case 'user':
        userRef.current?.onSave();
        break;
      case 'feed':
        feedRef.current?.onSave();
        break;
      case 'privacy':
        privacyRef.current?.onSave();
        break;
      default:
        break;
    }
  };

  return (
    <div className="settings-page">
      <div className="content">
        {tab === 'user' && <UserSettings ref={userRef} />}
        {tab === 'feed' && <FeedSettings ref={feedRef} />}
        {tab === 'privacy' && <PrivacySettings ref={privacyRef} />}
      </div>
      <footer>
        <button className="btn btn-save" onClick={handleSave}>Save</button>
      </footer>
    </div>
  );
};

export default SettingsPage;

关键说明 #

• forwardRef：允许父组件向子组件传递ref，从而获取子组件的内部方法。
• useImperativeHandle：自定义父组件通过ref能访问到的子组件方法，避免暴露整个子组件实例。
• 可选链?.：防止子组件未挂载时current为null导致的报错，提升代码健壮性。

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