javascript - 有没有办法在新选项卡中打开 react 组件的相同实例？

Question

我的主页上有一个复杂的 React 组件。我没有使用 redux。单击一个按钮，我想在新选项卡中打开带有一些新 Prop 的 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
            .......
        )
    }
}

场景是这样的:

1. 我将在我的主页上显示此组件，用户可以在其中向组件输入一些内容，组件状态中的 arr 将根据这些内容进行更改。
2. 当用户点击按钮时，相同的组件应该在新标签页中打开，其中 url 将以“/newtab”结尾。
3. 当两个选项卡都打开时，并且当用户向主页上的组件输入内容并触发 arr 中的更新时，我希望更新后的 arr 自动反射(reflect)在“/newtab”中的组件中

我正在使用这样的 react 路由:

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 组件完全无关。

1. 我想知道是否有办法在这两个位于不同选项卡上的组件之间共享状态。我正在实现本地存储方法。 (或)
2. 有没有办法让 react-router 在新选项卡中打开 App 组件的同一个实例，以便只有一个实例？如果这是可能的，那么想要将新的 Prop 传递给在“/newtab”打开的组件会有什么问题吗？
3. 如果我使用 redux，我的问题会得到解决吗？

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

Answer 1

您对 React 的理解有点偏差 - 您无法打开组件的“同一实例”，因为组件不会呈现给 DOM。组件被转换为 HTML 元素，因此两个不同的页面具有两个不同的 DOM 元素 - 它们无法共享。

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

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

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

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

有一个guide here关于如何做到这一点(作者使用 Redux)，但我相信您不需要使用 Redux 来实现这一点。