TransitionGroup ломает приложение на React

Question

Я создаю приложение на React при помощи библиотеки React Transition Group. Проблема в тому, что после обёртки кода в <TransitionGroup> перестаёт работать функционал

Код элемента:

import React from 'react'
import PostItem from './PostItem'
import { CSSTransition, TransitionGroup } from 'react-transition-group'

function PostList({ posts, title, remove }) {

    if (!posts.length) {
        return (
            <h1>
                Посты не найдены!
            </h1>
        )
    }

    return (
        <div>
            <h1>{title}</h1>
            <TransitionGroup>
                {posts.map((post, index) =>
                
                    <CSSTransition
                        key={post.id}
                        timeout={500}
                        classNames="post">
                        <PostItem remove={remove} number={index + 1} post={post} />
                    </CSSTransition>
                )}
            </TransitionGroup>
        </div>
    )
}

export default PostList

Возникает проблема:

react_dom__WEBPACK_IMPORTED_MODULE_3__.findDOMNode не является функцией Ошибка типа: react_dom__WEBPACK_IMPORTED_MODULE_3__.findDOMNode не является функцией в Transition.performEnter (http://localhost:3000/static/js/bundle.js:22899:92) в Transition.updateStatus (http://localhost:3000/static/js/bundle.js:22885:14) в Transition.componentDidMount (http://localhost:3000/static/js/bundle.js:22833:10) в react-stack-bottom-frame (http://localhost:3000/static/js/bundle.js:19567:20)

Answer 1

Бро была та же проблема, ты забыл предоставить параметр nodeRef={nodeRef}. Твой item должен выглядеть так:

<CSSTransition
    nodeRef={nodeRef}
    key={index + 1}
    timeout={500}
    classNames="post"
>

Не забудь перед return проинициализировать nodeRef:

const nodeRef = React.useRef(null);
return(...);

БЛОГ НА HUSL

TransitionGroup ломает приложение на React

Ответы (1 шт):