运行任何值更改时 TransitionGroup 内的 CSSTransition

Question

我正在查看 TransitionGroup documentation example，并尝试在 的 text 值更新时将其更新为运行 CSSTransition现有 项。

我已经设置了一个 codesandbox 来显示我当前的尝试。

const [items, setItems] = useState([
    { id: 1, text: 'Hello world!' },
    { id: 2, text: 'How are you?' },
]);

return (
    <Container style={{ marginTop: '2rem' }}>
        <ListGroup style={{ marginBottom: '1rem' }}>
            <TransitionGroup className="todo-list">
                {items.map(({ id, text }) => (
                    <CSSTransition
                        key={id}
                        timeout={500}
                        classNames="item">
                        <ListGroup.Item>{text}</ListGroup.Item>
                    </CSSTransition>
                ))}
            </TransitionGroup>
        </ListGroup>

        <Button
            onClick={() => {
                setItems((items) => [
                    { id: 1, text: 'Hello to you!' },
                    { id: 2, text: 'How do you do?' },
                ]);
            }}>
        Update Items
        </Button>
    </Container>

);

当我单击该按钮时，文本内容会在没有 CSSTransition 的情况下更新。我知道这是因为 id 没有改变，这就是 key 的设置，但是我如何让 TransitionGroup 考虑到 text 值？

如何保持相同 id 但使用过渡更新文本值？

Answer 1

由于 key={id}，当文本更新时键不会改变，CSSTransition 不会触发，因为它不会被重新渲染。

我们可以更改 key 以包含 id 和 text，因此当文本更改时组件将始终重新呈现。我们还想添加 exit={false} 以防止我们在新组件过渡时看到额外的组件。这应该是这样的：

<CSSTransition
  key={`${id}${text}`}
  timeout={500}
  classNames="item"
  exit={false}
>

这是 this solution.

的 codesandbox 示例

运行任何值更改时 TransitionGroup 内的 CSSTransition

Run CSSTransition inside TransitionGroup when any value changes

reactjs

react-transition-group

运行 任何值更改时 TransitionGroup 内的 CSSTransition

Run CSSTransition inside TransitionGroup when any value changes

reactjs

react-transition-group

运行任何值更改时 TransitionGroup 内的 CSSTransition