Question

我尝试使用Semantic-UI-React显示Reveal效果，以及我的隐藏＆＃34;当我将鼠标悬停在元素上时，元素不会变得可见，我找到了这个线程 - Semantic UI React - Adding Reveal Effect to Images in Cards - 但是如解决方案中所述，切换到带有div元素的纯语义ui-css对我来说不起作用或者，任何提示？

QuestionCard.js

<Card.Group>
        <Card> 
          <Reveal animated="move">
          <Reveal.Content visible>
            {null}
          </Reveal.Content>
          <Reveal.Content hidden>
          <Card.Content>
            <Image floated="right" size="mini" src="https://images.unsplash.com/photo-1458419948946-19fb2cc296af?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=909aa3b2057ec129c465bfa17d6497ff&auto=format&fit=crop&w=1050&q=80" />
            <Card.Header>Daniel Asks..</Card.Header>
            <Card.Meta>Would You Rather?</Card.Meta>
            <Card.Description>
              <strong>Option One:</strong> <em>Write Javascript?</em>
            </Card.Description>
            <Card.Description>
              <strong>Option Two:</strong> <em>Write Swift?</em>
            </Card.Description>
          </Card.Content>
          <Card.Content extra>
            <div className="ui two buttons">
              <Button basic color="green">
                Option One
              </Button>
              <Button basic color="yellow">
                Option Two
              </Button>
            </div>
          </Card.Content>
          </Reveal.Content>
          </Reveal>
        </Card>

Answer 1

当Reveal.Content为{时，您应该向visible添加 child 或 content 道具

<Reveal.Content visible>
    <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='medium' />
</Reveal.Content>

如果您查看Reveal.Content的implementation，如果有子代，则将其包裹在ElementType中，否则它将寻找内容道具。并最终返回给调用者。

在您的实现中，我只需要用一个占位符Image子项替换null元素，它就可以正常工作。

Semantic-UI-React显示不起作用

1 个答案: