如何在其他路由中的其他组件中获得更新的道具?

Question

我有一个react项目。我有3条路线，分别是/，/adult，/children。

我已经在App.js文件中创建了状态和onChange处理程序，并将它们作为道具传递给子组件，并在其中一个子组件中更新值，但更新的值未显示在另一个子组件

项目链接:https://codesandbox.io/s/trusting-haslett-pz2by?file=/src

当我增加成人值时，它在/成人页中更新，但我在另一个选项卡中打开了/children route，但道具值没有更新

我怎样才能做到这一点?

Answer 1

如果您在两个不同的浏览器选项卡中运行相同的页面，它们是完全不相关的。每一个都有自己的内存，并执行自己的javascript，一个不能影响另一个，除非你涉及到服务器或websockets。

你当前的代码工作得很好，只要你保持在同一个选项卡。你的状态在App组件中，对成人路由和子路由都可用。要测试这一点，请尝试从成人页面添加到儿童页面的链接。您可以在成人页面上增加几次，然后链接到子页面并看到相同的值

import React from "react";
import { Link } from "react-router-dom";
const Adult = (props) => {
return (
<div>
<button onClick={props.incAdult}>Increment</button>
<p> No of Adults : {props.adults} </p>
<Link to="/children">Test</Link>
</div>
);
};
export default Adult;