React函数组件通信：悬浮Container时动态修改InfoBox内容

核心思路是将InfoBox的内容状态统一放在App组件中管理，同时给Container组件传递鼠标事件的回调函数，让Container在触发悬浮/离开事件时通知App更新状态。这种方式既保持InfoBox在App中渲染，又实现了简洁的组件通信，还能保留初始内容的正常显示。

修改后的代码 #

App.js #

import { useState } from 'react';
import Container from './components/Container';
import InfoBox from './components/InfoBox';

function App() {
  // 管理InfoBox的内容状态，初始值设为需求的默认文本
  const [currentInfo, setCurrentInfo] = useState('test info box content');

  // 鼠标进入Container时更新InfoBox内容
  const handleContainerEnter = (text) => {
    setCurrentInfo(text);
  };

  // 鼠标离开Container时恢复初始内容（可根据需求调整逻辑）
  const handleContainerLeave = () => {
    setCurrentInfo('test info box content');
  };

  return (
    <div>
      <InfoBox content={currentInfo}/>
      {/* 给每个Container传递回调函数，无需重复编写事件逻辑 */}
      <Container 
        text='Charles Darwin' 
        onMouseEnter={() => handleContainerEnter('Charles Darwin')}
        onMouseLeave={handleContainerLeave}
      />
      <Container 
        text='Alexander The Great' 
        onMouseEnter={() => handleContainerEnter('Alexander The Great')}
        onMouseLeave={handleContainerLeave}
      />
      <Container 
        text='Nichola Tesla' 
        onMouseEnter={() => handleContainerEnter('Nichola Tesla')}
        onMouseLeave={handleContainerLeave}
      />
      <Container 
        text='Aristoteles' 
        onMouseEnter={() => handleContainerEnter('Aristoteles')}
        onMouseLeave={handleContainerLeave}
      />
    </div>
  );
}

export default App;

Container.js #

function Container(props) {
    return (
        <div className='containerDiv'>
            <p 
                className='containerText'
                // 绑定父组件传递的事件回调
                onMouseEnter={props.onMouseEnter}
                onMouseLeave={props.onMouseLeave}
            >
                {props.text}
            </p>
        </div>
    );
}

export default Container;

方案优势 #

• 职责清晰：App组件负责状态管理和数据分发，Container仅处理UI渲染和事件触发，InfoBox专注于内容展示，符合React单一职责原则。
• 代码简洁：无需在每个Container中重复编写事件逻辑，仅通过props传递回调即可，避免冗余代码。
• 初始状态正常显示：InfoBox的初始内容由App的state控制，页面加载时直接显示，不会出现首次悬浮才出现的问题。
• 扩展性强：后续若需修改InfoBox的内容逻辑（比如悬浮时展示更复杂的信息），只需调整App中的回调函数，无需改动子组件。

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