React：在带有状态的新选项卡中打开页面

Question

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

我尝试使用window.open（）和我的onClick处理程序。这将打开新选项卡，但不会从所需的父状态继承属性。我尝试使用localStorage.setItem（），但这太过于hacky，只能根据用户浏览器设置工作。

这是创建新页面的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方法上弹出一个模态并以这种方式显示组件？

Answer 1

你不能真正在两个窗口或标签之间传递状态。您需要从URL传递param并使用该param使用某些api获取数据

Answer 2

好吧，因为它是一个新的applcation实例，我们需要以某种方式手动传输数据。我自己从来没有这样做，但你可以尝试使用更传统的方式，如查询字符串/ 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