Question

我正在使用React在卡片中显示图像。图像来自API，在渲染图像页面时会被解析。现在我想使用React Semantic-UI设计库中的Dimmer组件，并在鼠标悬停时调暗图像。我在文档页面中尝试了以下示例：

const dimmedID = this.state.dimmedID
const collections = this.state.collections
const collectionsList = collections.map((project) =>
  <Dimmer.Dimmable
    key = { project.id }
    as = {Image}
    dimmed = {dimmedID === project.id ? true : false}
    dimmer = {{ active, content }}
    onMouseEnter = {() => { this.handleShow(project.id) }}
    onMouseLeave = {() => { this.handleShow('') }}
    src = { project.thumbnail }
    />
)

当触发onMouseEnter时，dimmedID状态对象被设置为图像的id。但是，渲染的所有图像都将变暗。不是鼠标所在的图像。我试着在调暗的参数上使用速记if-else，但这似乎不起作用。将鼠标悬停在一个图像上时，所有图像都会变暗。

有人知道如何解决这个问题吗？

Answer 1

好的，显然修复很容易......阅读太多了......

const dimmedID = this.state.dimmedID
const collections = this.state.collections
const collectionsList = collections.map((project) =>
  <Dimmer.Dimmable
    key = { project.id }
    as = {Image}
    dimmed = {dimmedID === project.id ? true : false}
    dimmer = {{ active: dimmedID === project.id, content }}
    onMouseEnter = {() => { this.handleShow(project.id) }}
    onMouseLeave = {() => { this.handleShow('') }}
    src = { project.thumbnail }
    />
)

反映从地图渲染的暗淡元素

1 个答案: