Javascript 在使用React转换组在React中装入组件之前，更新状态发送到子级

我需要创建一些转换，并创建一个场景，在这个场景中，被“in”转换的孩子应该对其转换状态有一个概念

我试图做的是在转换之前将“TransitionOne”状态设置为“false”，转换完成后，我将该状态更新为“true”

但是如果我通过不同的路径，续集转换在装载时会立即得到“transitionDone:true”，但是我希望它为false，这样我就可以告诉组件它已经完成了转换

一个简化的例子

父组件

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>;
}

导入{
BrowserRouter作为路由器，
转换
路线,，
使用地点
}从“反应路由器dom”；
从“react”导入{useffect，useState，useRef}；
从“/章节”导入章节；
从“反应转换组”导入{Transition，SwitchTransition}；
//
函数内容（）{
const location=useLocation（）；
const[transitionOne，setTransitionOne]=useState（false）；
const promiseRef=useRef（Promise.resolve（true））；
//单体跃迁
让onEnter=（节点）=>{
SetTransitionOne（假）；
log（“父：转换启动”）；
//执行转换和解析
//想象一个500毫秒的过渡
promiseRef.current=新承诺（（解决、拒绝）=>{
设置超时（（）=>{
决定（“进入”）；
}, 500);
});
};
//OnExit过渡
让onExit=（节点）=>{
promiseRef.current=新承诺（（解决、拒绝）=>{
决定（“退出”）；
});
};
//
让endListener=（节点，完成）=>{
//
promiseRef.current
。然后（（类型）=>{
//检查这是否是enter转换
如果（类型=“输入”）{
log（“父：转换完成”）；
SetTransitionOne（真）；
}
返回；
})
.然后（完成）；
};
返回(
);
}
导出默认内容；

子组件

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>;
}

从“react router dom”导入{useParams}；
从“react”导入{useffect}；
导出默认功能章节（道具）{
常量{transitionOne}=props；
const{chapterslaug}=useParams（）；
useffect（（）=>{
log（`Child:mount，transitionDone:${transitionDone}`）；
}, []);
useffect（（）=>{
log（`Child:transitionDone changed${transitionDone}`）；
}，[TransitionOne]）；
返回章：{chapterslaug}；
}

我还制作了一个沙盒示例

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

• 父项：转换开始
• 子项：装载，传递单项：false
• 孩子：TransitionOne变为false
• 父项：转换完成
• 孩子：TransitionOne变为true

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

• 父项：转换开始
• 子项：装载、传递单项：真
• 孩子：TransitionOne变为true
• 孩子：TransitionOne变为false
• 父项：转换完成
• 孩子：TransitionOne变为true

当子进程挂载时，它已经具有一个true