如何在地图上使用react-semantic-ui transition.group

Question

我有一堆卡片，我希望每一个项目都有一个过渡，但是我真的不能弄清楚如何实现它。

根据文档，我必须使用类似这样的内容：

 <Transition.Group
          as={List}
          duration={200}
          divided
          size='huge'
          verticalAlign='middle'
        >
          {items.map((item) => (
            <List.Item key={item}>
              <Image avatar src={`/images/avatar/small/${item}.jpg`} />
              <List.Content header={_.startCase(item)} />
            </List.Item>
          ))}
        </Transition.Group>

但是我并没有真正了解as={List}在这里做什么。这就是为什么不能真正推进我的解决方案的原因。任何帮助将不胜感激。

这是我所拥有的：

 <Card.Group itemsPerRow={itemsPerRow} centered>
          {data.map((e) => {
            const dateToFormat = e.created_at;
            const userIndex = data.indexOf(e);

            return (

              <Card raised>
                <Image
                  src={readmeFiles[userIndex].image}
                  wrapped
                  size="large"
                  ui={false}
                  onClick={() => {
                    const index = data.indexOf(e);
                    clickHandler(index);
                  }}
                />
                <Card.Content>
                  <Card.Header></Card.Header>
                  <Card.Meta>
                    <span className="date">{e.name}</span>
                  </Card.Meta>
                  <Card.Description>{e.description}</Card.Description>
                </Card.Content>
                <Card.Content extra>
                  <a>
                    <Icon name="calendar alternate outline" />
                    Created: <Moment date={dateToFormat} fromNow />
                  </a>
                </Card.Content>
              </Card>

            );
          })}

Answer 1

as={List}告诉语义，将此Transition.Group组件呈现为List组件，该组件充当List.Item组件的父代。仅当以List作为父级时，它们才能正确渲染。

在您的情况下，父级将是Card.Group组件。