语义UI React-为卡片中的图像添加显示效果

React组件似乎有一个bug,它没有指定分隔缝中“可见”元素的宽度。“隐藏”元素 做 指定宽度为“100%”。

看到偏移量了吗?

因此,当我们将其添加进来时,“可见”组件的定位正确地覆盖了此代码沙盒中演示的“隐藏”组件:

https://codesandbox.io/s/v8mylv1p3

或者,如果您首先将图像格式化为全宽,那么它可能工作得很好。

我回答自己,因为我找到了一个(我承认不是很聪明)解决这个问题的方法。目前,它正在使用以下版本的语义UI+语义UI React。

中的上次更新 2018年3月 :

"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"

在我的组件中,我简单地去掉了 <Image> 或 <Reveal> 组件并使用普通 <div> JSX组件(包含两个 Images 模仿 Reveal 行为):

...
<Card>
    <div className={'ui slide masked reveal image'}>
        <Image src='/img/products/1.jpg' className={'visible content'} />
        <Image src='/img/products/2.jpg' className={'hidden content'} />
    </div>
    <Card.Content>
        <Card.Header textAlign={'center'}>
            Product name
        </Card.Header>
    ...

这将对所需功能产生最小影响:)