Javascript 如何在单个组件上生成悬停事件？

我想在照片上显示h4照片标题，但前提是照片悬停。我曾尝试使用onMouseEnter和onMouseLeave来实现这一点，但如果我使用许多相同的组件，当我将其中一个悬停时，页面上的每个组件都会显示照片标题。我可以在代码中做些什么，只在悬停的照片上显示标题吗

单张照片：

const Photo = props => (
  <div onMouseEnter={props.onMouseEvent} 
       onMouseLeave={props.onMouseEvent} 
       style={props.backgroundImage}>
    <h4>{props.hovered && props.title}</h4>
  </div>
); 

const Photo = props => (
  <div style={props.backgroundImage} className="div-photo">
    <h4 className="photo-title">{props.title}</h4>
  </div>
); 

const Photo=props=>(
{props.hovered&&props.title}
); 

显示许多照片组件：

class Gallery extends Component {
  state = {
    photos: [], // fetched photos here
    hovered: false
  };

  toggleMouseHover = () => this.setState(prev => ({ hovered: !prev.hovered }));

  render() {

    return (
        {this.state.photos.map(photo => {
          <Photo
            backgroundImage={{ backgroundImage: `url(${photo.src})` }}
            title={photo.title}
            onMouseEvent={this.toggleMouseHover}
            hovered={this.state.hovered}
          />
        })}
    );
  }
}

类库扩展组件{
状态={
照片：[]，//在此处获取照片
悬停：错误
};
toggleMouseHover=（）=>this.setState（prev=>（{hovered:！prev.hovered}））；
render（）{
返回(
{this.state.photos.map（photo=>{
})}
);
}
}

---

我曾考虑在CSS:：before或：：after中使用内容，但我不能在React中使用内容。

使用纯CSS可以做到这一点，使用React并不重要

单张照片：

const Photo = props => (
  <div onMouseEnter={props.onMouseEvent} 
       onMouseLeave={props.onMouseEvent} 
       style={props.backgroundImage}>
    <h4>{props.hovered && props.title}</h4>
  </div>
); 

const Photo = props => (
  <div style={props.backgroundImage} className="div-photo">
    <h4 className="photo-title">{props.title}</h4>
  </div>
); 

---

我认为这应该行得通。如果愿意，可以使用属性

可见性

。此外，如评论中所述，如果您想使用淡入/淡出效果，属性

不透明度
是一个很好的选择。
您可以使用纯css来实现这一点，使用react并不重要

单张照片：

const Photo = props => (
  <div onMouseEnter={props.onMouseEvent} 
       onMouseLeave={props.onMouseEvent} 
       style={props.backgroundImage}>
    <h4>{props.hovered && props.title}</h4>
  </div>
); 

const Photo = props => (
  <div style={props.backgroundImage} className="div-photo">
    <h4 className="photo-title">{props.title}</h4>
  </div>
); 

我认为这应该行得通。如果愿意，可以使用属性
可见性
。另外，正如评论中提到的，属性
opacity
是使用淡入/淡出效果的好选择。
问题是所有
Photo
组件共享相同的
悬停状态属性。为什么不使用纯css？问题是所有
Photo
组件共享相同的
悬停状态属性。为什么不使用纯css呢纯css？我想补充说，
不透明度
是一个很好的使用方法，因为如果你愿意，你可以更好地使用css转换来淡入淡出标题。我想补充说，
不透明度
是一个很好的使用方法，因为如果你愿意，你可以更好地使用css转换来淡入淡出标题。