代码之家 › 专栏 › 技术社区 › nobody

从贴图渲染的React dim元素

semantic-ui reactjs

nobody · 技术社区 · 7 年前

我正在使用React在卡片中显示图像。图像来自API,在呈现图像页面时进行解析。现在,我想使用React语义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,但似乎不起作用。将鼠标悬停在一个图像上时,所有图像都会变暗。

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

1 回复 | 直到 7 年前

nobody 7 年前

好的,显然修复很容易。。。阅读到此为止。。。

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 }
    />
)

推荐文章