反应：在带有状态的新标签页中打开页面答案

【问题标题】：React: open page in new tab with state反应：在带有状态的新标签页中打开页面
【发布时间】：2019-04-02 15:02:40
【问题描述】：

我希望我的动态组件在新选项卡中打开，这样我就可以在初始页面上保留搜索结果。我想打开一个新页面的组件需要从父组件继承多个属性。

我尝试将 window.open() 与我的 onClick 处理程序一起使用。这将打开新选项卡，但不会从所需的父状态继承属性。我尝试使用 localStorage.setItem()，但这太老套了，只能根据用户的浏览器设置工作。

这是创建新页面的 onclick 方法。我希望能够让它从这里打开一个新标签。

 handleContract = (id) => {
  API.openRow(id)
  .then(res => {
    const pdfs = res.data;
    this.setState({pdfs});
    this.props.history.push({
      pathname: '/pdf',
      state: { labels:this.state.labels,
        pdfs:this.state.pdfs,
        titles:this.state.titles }
    })
  })
  .catch(err => console.log(err));
  API.titles(id)
  .then(res => {
    const titles = res.data;
    this.setState({titles});
  })
}

作为次要选项。是否可以在我的 onClick 方法上弹出一个模式并以这种方式显示组件？

【问题讨论】：

标签： reactjs parameters onclick window.open

【解决方案1】：

您不能真正在两个窗口或选项卡之间传递状态。您需要从 URL 传递参数并使用该参数使用一些 api 获取数据

【讨论】：

你能再解释一下吗？如何从 URL 传递参数并获取？
在定义路由时，您可以执行类似<Route exact path="/someroute/:someparam" component={Component} /> 的操作，在<Component /> 内部，您可以使用this.props.match.params.someparam 获取一些参数，并将该参数用于服务器端登录以获得任何结果你想要

【解决方案2】：

好吧，既然它是一个新的应用程序实例，我们需要以某种方式手动传递数据。我自己从未这样做过，但您可以尝试使用更传统的方式，例如查询字符串/url 参数（如果您没有太多信息），或者您可以使用 window.postMessage https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

但似乎还有一种方法可以使用 React 门户归档您想要的内容。因为，就像我说的那样，我自己从来没有做过这样的事情，我希望我可以分享一个链接到一篇解释如何做的媒体文章： https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

【讨论】：