#javascript #reactjs #react-router #react-transition-group
#javascript #reactjs #react-router #react-transition-group
Вопрос:
У меня есть приложение для чата, созданное с помощью react и react router. Я использовал react transition group для анимации между чатами, но проблема в том, что у меня есть картинки в чатах, и я хотел отобразить их пользователю, когда он нажимает на них, а также хотел сделать это с маршрутом и анимировать его, какв любом приложении чата, кроме родительского маршрута, который является чатом, анимируется.
Это похоже на то, что когда маршрут меняется с "/chat/:chatID"
на "/chat/:chatID/image"
него, он анимируется, я видел много решений для этого, но ни одно из них не сработало для меня, и я действительно расстроен и зол, я не понимаю, почему создатели маршрутизатора react не дали нам возможность анимировать компонент, когда мы захотим.
Вот код маршрута компонента чата:
<TransitionGroup component={null}>
<CSSTransition
timeout={300}
classNames="page"
key={!location.pathname.includes("/image") ? location.pathname : null}
>
<Route path={`${path}/room/:roomID`} location={location}>
<chat
unreadMessages={unreadMessages}
animState={state}
imagePreview={imagePreview}
setImagePreview={setImagePreview}
/>
</Route>
</CSSTransition>
</TransitionGroup>
Вот код маршрута предварительного просмотра изображения, который находится внутри компонента чата:
<TransitionGroup component={null}>
<CSSTransition
timeout={300}
classNames="page"
key={location.pathname}
>
<Route path={path "/image"} location={location}>
<ImagePreview
setImagePreview={setImagePreview}
imagePreview={imagePreview}
path={path}
animState={animState}
/>
</Route>
</CSSTransition>
</TransitionGroup>
Как вы можете видеть, я получаю доступ к location.pathname
и проверяю, есть ли у него маршрут изображения, если это так, я помещу ключ как null, но все равно компонент анимируется, и я вижу его, и он только анимируется, но не включается. Я хочу, чтобы компонент не анимировался, когда я перехожу в /image, и изображение будет отображатьсявизуализация с анимацией.
Также, когда я выхожу из компонента предварительного просмотра изображения, который должен показывать изображение пользователю, компонент чата анимируется только без анимации. Поэтому, пожалуйста, помогите мне, я действительно устал от react router!!!
Ответ №1:
Я нашел решение!!!:
<TransitionGroup component={null}>
<CSSTransition
timeout={300}
classNames="page"
key={location.pathname.replace("/image", "")}
>
<Route path={`${path}/room/:roomID`} location={location}>
<chat
unreadMessages={unreadMessages}
animState={state}
imagePreview={imagePreview}
setImagePreview={setImagePreview}
/>
</Route>
</CSSTransition>
</TransitionGroup>
Это очень просто CSSTransition запустит анимацию, если ключ изменится, поэтому, если он изменится, он анимирует компонент предыдущего ключа, а затем анимирует в компоненте нового ключа, поэтому, когда я перейду /chat/:chatID
к /chat/:chatID/image
нему, он анимирует компонент чата, а затем анимирует, потому что ключ меняется, поэтому решениепроверить, есть ли в пути /image, и если он удаляет его, как я это сделал location.pathname.replace("/image","")
Поэтому, если вы хотите анимировать вложенные маршруты, вам следует удалить путь к этим маршрутам в вашем родительском маршруте, чтобы он не обнаруживал изменение пути, и если у вас много дочерних маршрутов, создайте функцию, которая удаляет весь вложенный путь из полного пути.
Надеюсь, я помог кому-нибудь рассказать мне, что вы думаете, и работает ли это для вас в комментариях :))