React问题：点击Tab时调用子组件函数无效的解决方法

问题描述 #

开发包含两个标签页（Tab1、Tab2）的React应用，期望点击Tab2时控制台输出“Function A is called”。当前标签页切换功能正常，但控制台无预期输出。

问题原因 #

react-tabs的onSelect事件触发时机是标签切换完成前，此时Tab2对应的TabPanel尚未挂载，子组件MyComponent的ref还未被赋值（myComponentRef.current为null），导致调用funcA的逻辑被跳过。

解决方案 #

方案一：通过状态监听+Effect触发 #

在父组件中用useState管理选中标签的索引，通过useEffect监听索引变化，确保组件挂载后再调用子组件方法：

修改后的App.js代码：

import MyComponent from './MyComponent';
import React, { useState, useEffect, useRef } from 'react';
import './App.css';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

function App() {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const myComponentRef = useRef();

  useEffect(() => {
    // 当切换到Tab2且子组件ref已赋值时调用方法
    if (selectedIndex === 1 && myComponentRef.current) {
      myComponentRef.current.funcA();
    }
  }, [selectedIndex]);

  return (
    <div className="App">
      <Tabs selectedIndex={selectedIndex} onSelect={setSelectedIndex}>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
        </TabList>

        <TabPanel>
          HelloWorld123
        </TabPanel>
        <TabPanel>
          <MyComponent ref={myComponentRef} />
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default App;

方案二：子组件挂载时自动触发 #

直接在子组件的useEffect中调用funcA，因为只有Tab2被选中时，MyComponent才会被挂载：

修改后的MyComponent.jsx代码：

import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';

const MyComponent = forwardRef((props, ref) => {
  const myRef = useRef(null);

  function funcA() {
    console.log('Function A is called');
    myRef.current?.focus();
  }

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

  // 组件挂载时执行方法
  useEffect(() => {
    funcA();
  }, []);

  return (
    <div>
      <p ref={myRef}>This is a message for Tab 2</p>
    </div>
  );
});

export default MyComponent;

说明 #

• 方案一适用于需要每次切换到Tab2都触发方法的场景（比如Tab2可能被反复卸载/挂载）；
• 方案二更简洁，适合仅需首次切换到Tab2时触发的场景。

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