有没有办法在新选项卡中打开相同的反应组件实例？答案

【问题标题】：Is there a way to open the same instance of a react component in a new tab?有没有办法在新选项卡中打开相同的反应组件实例？
【发布时间】：2020-07-04 09:56:33
【问题描述】：

我的主页上有一个复杂的反应组件。我没有使用redux。单击按钮时，我想在新选项卡中打开带有一些新道具的反应组件的同一实例。问题是我不确定如何让它们保持同步。

假设我有一个处于组件状态的数组，并且我正在组件中显示数组的内容。现在根据用户的输入，我将修改数组。我希望更新后的数组也显示在新选项卡中打开的组件中。

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
            .......
        )
    }
}

场景是这样的：

我将在我的主页上显示这个组件，用户可以在其中向组件输入一些内容，根据这些内容，组件状态中的 arr 将发生变化。
当用户单击按钮时，应在新选项卡中打开相同的组件，其中 url 将以“/newtab”结尾。
当两个选项卡都打开时，当用户在主页上向组件输入内容并触发 arr 更新时，我希望更新后的 arr 自动反映在“/newtab”中的组件中

我正在使用这样的反应路由：

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 组件在主页上和“/newtab”页面上的App组件完全不相关。

我想知道是否有办法在不同选项卡上的这两个组件之间共享状态。我正在实施本地存储方法的一半。（或）
有没有办法让 react-router 在新选项卡中打开 App 组件的同一个实例，这样只会有一个实例？如果可以的话，将新的道具传递给在“/newtab”打开的组件会有什么问题吗？
如果我使用 redux 会解决我的问题吗？

如果我在任何地方不清楚，请告诉我，如果我可以为您提供更多信息。非常感谢。

【问题讨论】：

"场景是这样的：" 这是描述您想要做什么的良好开端。我建议您将其改写为完全从用户的角度来看。例如，“用户可以输入一些东西……”很好。详细了解用户输入的内容。（我假设您在这里遗漏了一些您完全了解的细节，但没有在您的帖子中分享给我们。）另一方面，“基于状态中的 arr”并没有描述用户所做的事情。这是关于代码中的技术细节。在这个级别，您应该避免此类细节。描述用户的行为和结果。
@roronoa 如果我的回答对您有所帮助，请将其标记为已接受，以便可以关闭问题。

标签： javascript reactjs react-redux react-router local-storage

【解决方案1】：

你对 React 的理解有点偏差——你不能打开一个组件的“同一个实例”，因为组件没有渲染到 DOM。组件被转换为 HTML 元素，因此两个不同的页面有两个不同的 DOM 元素——它们不能共享。

您要做的是在两个选项卡之间共享状态。

React 不支持这一点，新标签是一个新应用，它是一个完全独立的实例。

在同一浏览器中打开的应用的两个实例之间共享状态的唯一方法是使用第三方/外部 API。

例如，您可以将应用连接到浏览器的本地存储。这意味着应用程序的两个实例将共享相同的本地存储数据。请注意这一点，因为您不能在本地存储中存储任何敏感数据（即用户详细信息、密码、银行详细信息、访问令牌），因为它容易受到 XSS 和其他攻击。

有一个guide here 说明如何做到这一点（作者使用 Redux），但我相信你不需要使用 Redux 来实现这一点。

【讨论】：