React状态冲突问题：hover单个Event组件时其他组件同步变更

你的问题核心在于两个Event组件共享了父组件Events的状态（position、display、left），所以当hover其中一个组件时，状态更新会同时作用在两个组件上，导致它们同步变化。

解决方案：拆分独立组件，让每个Event拥有自身状态 #

把单个Event封装成独立的EventItem组件，每个组件维护自己的交互状态，这样每个组件的hover行为就会完全独立，不会互相影响。

修改后的React组件代码

import { useState } from 'react'
import './Events.css'

// 独立的EventItem组件，自带私有状态
function EventItem({ title, desc, imgSrc }) {
    const [position, setImgPos] = useState('0')
    const [display, setDisplay] = useState('')
    const [left, setLeft] = useState('-100%')

    const stylesImg = { left: position };
    const stylesTitle = { display: display };
    const stylesDesc = { left: left };

    return (
        <div className='event'
            onMouseLeave={() => {
                setImgPos('0');
                setTimeout(() => setDisplay(''), 500)
                setLeft('-100%')
            }}>
            <img 
                style={stylesImg}
                onMouseEnter={() => {
                    setImgPos('60vw');
                    setDisplay('none');
                    setLeft('0')
                }}
                src={imgSrc}
            />
            <p style={stylesTitle} className='event-title'>{title}</p>
            <p style={stylesDesc} className='event-desc'>{desc}</p>
        </div>
    )
}

export default function Events() {
    const imgSrc = "https://www.w3schools.com/css/img_forest.jpg";
    const descText = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus neque mollitia voluptates aliquid voluptas cupiditate! Aliquam modi sint nulla eos excepturi ab repellat accusamus id eius facere, soluta minus.";

    return (
        <div className='events-box'>
            <EventItem title="RoboWars" desc={descText} imgSrc={imgSrc} />
            <EventItem title="RoboWars" desc={descText} imgSrc={imgSrc} />
        </div>
    )
}

优化后的CSS代码（修复定位问题）

.events-box {
    margin-top: 20px;
}

.event {
    background-color: #3B3B3B;
    display: flex;
    align-items: center;
    position: relative; /* 让内部绝对定位元素基于当前容器定位 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    height: 40vh; /* 固定容器高度，和图片高度匹配 */
    margin-bottom: 10px; /* 添加间距，区分两个组件 */
}

img {
    width: 40vw;
    height: 40vh;
    position: relative;
    transition: 1s;
}

.event-title {
    margin: auto;
    color: #fff;
    font-size: 2em;
    position: relative;
    z-index: 1; /* 确保标题在图片上层 */
}

.event-desc {
    position: absolute; /* 替换fixed为absolute，避免全局定位 */
    left: 40vw; /* 从图片右侧开始布局 */
    font-size: 1em;
    color: white;
    width: 60vw;
    padding: 20px;
    margin: 0;
    transition: 1s;
    box-sizing: border-box;
}

关键改动说明 #

1. 拆分独立组件：EventItem组件拥有自身的状态，状态更新仅作用于当前组件实例
2. 数据复用传递：父组件通过props传递每个Event的标题、描述、图片源，实现组件复用
3. CSS定位优化：将描述框的fixed定位改为absolute，并给容器添加相对定位，避免全局布局冲突

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