Question

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

我尝试通过onClick处理程序使用window.open（）。这将打开新选项卡，但不会继承父状态所需的属性。我尝试使用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传递参数，并使用使用该参数的一些api获取数据

Answer 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

反应：在新标签页中打开状态页面

2 个答案: