您应该做的是为每个具有自己状态的滑块创建一个组件。
因此，您封装了应用程序中每个逻辑组件的状态。

只是使用不同的状态，检查此：

export default function Feed() {
  const [position, setImgPos] = useState('0')
  const [display, setDisplay] = useState('')
  const [left, setLeft] = useState('-100%')
  const [position2, setImgPos2] = useState('0')
  const [display2, setDisplay2] = useState('')
  const [left2, setLeft2] = useState('-100%')

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

  const stylesImg2 = {
    left: position2
  };
  const stylesTitle2 = {
      display: display2,
  };
  const stylesDesc2 = {
      left: left2
  };

  return (
      <div className='events-box'>
          <div className='event'
            onMouseLeave={() => {
              setImgPos('0');
              setTimeout(() => {
                  setDisplay('');
              }, 500)
              setLeft('-100%')
            }} >
              <img style={stylesImg}
                  onMouseEnter={() => {
                      setImgPos('60vw');
                      setDisplay('none');
                      setLeft('0')
                  }}
                  src="https://www.w3schools.com/css/img_forest.jpg"
              />
              <p style={stylesTitle} className='event-title'>RoboWars</p>
              <p style={stylesDesc} className='event-desc'>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.</p>
          </div>


          <div className='event'
            onMouseLeave={() => {
              setImgPos2('0');
              setTimeout(() => {
                  setDisplay2('');
              }, 500)
              setLeft2('-100%')
          }} >
              <img style={stylesImg2}
                  onMouseEnter={() => {
                      setImgPos2('60vw');
                      setDisplay2('none');
                      setLeft2('0')
                  }}
                  src="https://www.w3schools.com/css/img_forest.jpg"
              />
              <p style={stylesTitle2} className='event-title'>RoboWars</p>
              <p style={stylesDesc2} className='event-desc'>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.</p>
          </div>
      </div>
  )
}

或者你可以只玩css，只是使1状态例如使用布尔“isActive”状态，当isActive然后添加新的类.下面的完整代码：

import { useState } from "react";
import styles from './feed.module.css';

const content = [
    {
        image: "https://www.w3schools.com/css/img_forest.jpg",
        title: "RoboWars",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
    },
    {
        image: "https://www.w3schools.com/css/img_forest.jpg",
        title: "RoboWars 2",
        desc: "Another Lorem ipsum dolor sit amet consectetur adipisicing elit."
    }
]

export default function Feed() {
  const [isActive, setIsActive] = useState(-1);

  return (
      <div className='events-box'>
        {content.map((build, i) => {
            return (<div className='event'>
            <img className={isActive===i ? styles.activeImg : styles.stylesImg}
                onMouseEnter={() => setIsActive(i)}
                src={build.image}
            />
            <p className={`${isActive===i ? styles.activeTitle : styles.stylesTitle} ${styles.eventTitle}`}>{build.title}</p>
            <p className={`${isActive===i ? styles.activeDesc : styles.stylesDesc} ${styles.eventDesc}`}>{build.desc}</p>
        </div>);
        })}
      </div>
  )
}

把这个加到你的css文件里：

.stylesImg {
  left: 0;
 }
.stylesTitle {
  display: '';
 }
.stylesDesc {
  left: -100%;
 }

.activeImg {
  left: 60vw;
 }
.activeTitle {
  display: none;
 }
.activeDesc {
  left: 0;
 }