在使用 React-Transition-Group 在 React 中安装组件之前，更新状态发送给子组件

问题描述

我需要创建一些转换并有一个场景，在这个场景中，“进入”转换的 Child 应该对其转换状态有一个概念。

我尝试做的是在转换之前将“transitionDone”状态设置为“false”，在转换完成后我将此状态更新为“true”。

但是如果我通过不同的路线，续集过渡在安装时立即获得“transitionDone：true”，但我希望它为假，以便我可以告诉组件它已完成过渡。

一个简单的例子

父组件

import {
  browserRouter as Router,Switch,Route,useLocation
} from "react-router-dom";
import { useEffect,useState,useRef } from "react";
import Chapter from "./Chapter";
import { Transition,SwitchTransition } from "react-transition-group";

//
function Content() {
  const location = useLocation();
  const [transitionDone,setTransitionDone] = useState(false);
  const promiseRef = useRef(Promise.resolve(true));

  // OnEnter Transition
  let onEnter = (node) => {
    setTransitionDone(false);
    console.log("Parent: transition start");

    // perform the transition and the resolve
    // imagine an transition which takes 500ms
    promiseRef.current = new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve("enter");
      },500);
    });
  };

  // OnExit Transition
  let onExit = (node) => {
    promiseRef.current = new Promise((resolve,reject) => {
      resolve("exit");
    });
  };

  //
  let endListener = (node,done) => {
    //
    promiseRef.current
      .then((type) => {
        // check if this is the enter transition
        if (type === "enter") {
          console.log("Parent: transition done");
          setTransitionDone(true);
        }
        return;
      })
      .then(done);
  };

  return (
    <div className="content">
      <SwitchTransition mode="in-out">
        <Transition
          key={location.pathname}
          onEnter={onEnter}
          onExit={onExit}
          addEndListener={endListener}
        >
          <div>
            <Switch location={location}>
              <Route path="/:chapterSlug">
                <Chapter transitionDone={transitionDone}></Chapter>
              </Route>
            </Switch>
          </div>
        </Transition>
      </SwitchTransition>
    </div>
  );
}
export default Content;

子组件

import { useParams } from "react-router-dom";
import { useEffect } from "react";

export default function Chapter(props) {
  const { transitionDone } = props;
  const { chapterSlug } = useParams();

  useEffect(() => {
    console.log(`Child: mount,transitionDone: ${transitionDone}`);
  },[]);
  useEffect(() => {
    console.log(`Child: transitionDone changed ${transitionDone}`);
  },[transitionDone]);

  return <div className="chapter">Chapter: {chapterSlug}</div>;
}

我还制作了一个沙盒示例 https://codesandbox.io/s/late-microservice-83e0y?file=/src/Chapter.js:0-476

如果您单击第 1 章，控制台将显示：

• 父级：过渡开始
• 子：mount，transitionDone：false
• 孩子：transitionDone 更改为 false
• 父级：转换完成
• 孩子：transitionDone 已更改为 true

这就是我想要的，因为子组件在安装时有一个错误的 transitionDone 。 但是如果我点击第 02 章：

• 父级：过渡开始
• 子：mount，transitionDone：true
• 孩子：transitionDone 已更改为 true
• 孩子：transitionDone 更改为 false
• 父级：转换完成
• 孩子：transitionDone 已更改为 true

当孩子登上它已经有transitionDone true...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）