我的主页上有一个复杂的react组件。我没有使用redux。单击按钮后，我想在新选项卡中打开带有一些新道具的react组件的相同实例。问题是我不确定如何保持它们同步。
假设我的组件状态中有一个数组，并且正在组件中显示该数组的内容。现在，根据用户的输入，我将修改数组。我希望更新的数组也显示在新选项卡中打开的组件中。
class App extends Component{
constructor(props){
this.state = {arr = []};
}
handleUserInput = arr => {
//make changes to arr
this.setState({ arr });
};
render(){
return(
// code to call this.handleUserInput()
<button href="/newtab" target="_blank"> </button>
{arr} //display the array here
.......
)
}
}
场景如下：
我正在使用像这样的反应路由：
const routing = (
<Router>
<Route exact path="/" component={App} /> //user inputs something on this instance of App and arr from this App instance will be updated
<Route exact path="/newtab" component={App additionalProps={additionalProps} /> // I want the updated arr from the App instance on the main page to show up here.
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
我清楚地了解，通过这种使用react-router在新选项卡中打开组件的方法，我实际上是在新选项卡中打开App组件的新实例，这使App组件位于主页和App组件上在“ / newtab”页面上完全不相关。
如果我不清楚在任何地方以及是否可以为您提供更多信息，请告诉我。非常感谢你。
您对React的理解有些偏斜-您无法打开组件的“同一实例”，因为组件没有呈现给DOM。组件被转换为HTML元素，因此两个不同的页面具有两个不同的DOM元素-它们无法共享。
您想要做的是在两个标签之间共享状态。
React不支持此功能，一个新选项卡是一个新应用程序，它是一个完全独立的实例。
在同一浏览器中打开的两个应用实例之间共享状态的唯一方法是使用第三方/外部API。
例如，您可以将您的应用程序连接到浏览器的本地存储。这意味着该应用程序的两个实例将共享相同的本地存储数据。请务必谨慎，因为您不得将任何敏感数据（即用户详细信息，密码，银行详细信息，访问令牌）存储在本地存储中，因为它容易受到XSS和其他攻击的影响。
这里有一个有关如何执行此操作的指南（作者使用Redux），但是我敢肯定您不需要使用Redux来实现此目的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句