reactjs - 在新窗口中呈现时如何将数据传递给组件

Question

我正在使用 React router Link 在新窗口中渲染一个组件，现在如何将数据传递给这个新组件。我想传递的数据是 JSON 数据，所以如果我将它作为参数传递或查询它是否显示在 URL 中。

那么在新窗口中打开时还有其他选项可以传递数据吗？

Answer 1

使用较新的选项之一:

本地存储

索引数据库

postMessage ( https://plnkr.co/edit/YrG1KNrc1CvLCp8A1ucG )

<script>
var popup = window.open('data:text/html;charset=utf-8;base64,PHNjcmlwdD5mdW5jdGlvbiByZWNlaXZlTWVzc2FnZShldmVudCkgeyBldmVudC5zb3VyY2UucG9zdE1lc3NhZ2UoImhpIHRoZXJlIHlvdXJzZWxmISB0aGUgc2VjcmV0IHJlc3BvbnNlIGlzOiAiICsgZXZlbnQuZGF0YSwgIioiKTsgY29uc29sZS5sb2coIldlIHJlY2VpdmVkIHRoZSBtZXNzYWdlOiAiICsgZXZlbnQuZGF0YSk7IH0gd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCByZWNlaXZlTWVzc2FnZSwgZmFsc2UpOzwvc2NyaXB0Pg==');

function receiveMessage(event)
  {
  console.log("The message from the data:URI is: " + event.data );
  }

function foo()
  {
  popup.postMessage("The user is 'bob' and the password is 'secret'", "*");
  popup.postMessage("hello there!", "*");
  }

window.addEventListener("message", receiveMessage, false);
window.setTimeout(foo, 2000);
</script>

引用文献

Window.postMessage() - Web APIs | MDN

Every known way to get references to windows in JavaScript

How should I implement saving state to localStorage?

Pull data from IndexedDB into array and output it via ReactJS

Triggering Synthetic Event in React App

A technique for saving content from a data:text/html, URI