从 localStorage 存储和提取 JSX 元素

Question

在我的 React 应用程序中，我在 localStorage 中存储了一个 javascript 对象。此对象表示应用程序中使用的主题。问题是这个对象的组件之一是一个JSX元素：

{

  ...

  icon: <Logo />,

  ...

}

然后我在我的应用程序中使用这个对象：

render() {

  return (

    <>

      {theme.icon}

    </>

  )

}

现在的问题是，当我将这个对象保存在 localStorage using 中JSON.stringify()时，JSX 对象已“损坏”，并且在 using 之后不再被视为 React 对象JSON.parse()。

如果我查看 localStorage，icon元素的存储方式如下：

{key: null, ref: null, props: {width: "154", height: "79", viewBox: "0 0 154 79"}, _owner: null,…}

那么你知道我可以存储、提取然后使用来自 localStorage 的 JSX 元素吗？

Answer 1

为什么不将图标值更改为引用您想要的图标类型的字符串。例子：存储在 localStorage 中的对象：{&nbsp; ...&nbsp; icon: "logo",&nbsp; ...}并在您的代码中创建一个条件：render() {&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; {theme.icon === 'logo'? <Logo /> : null}&nbsp; &nbsp; </>&nbsp; )}或制作一个 Icon 通用组件，将图标类型作为道具并呈现正确的：render() {&nbsp; return (&nbsp; &nbsp; <Icon type={theme.icon}/>&nbsp; );}

Answer 2

您不应该将 react 组件引用存储在字符串中，并且 JSON.stringify 无法正确序列化它们（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify）。我建议您将组件替换为它的名称（或某个键），然后您将使用它来呈现适当的组件：{&nbsp; ...&nbsp; icon: 'Logo', // then render the appropriate component based on this&nbsp; ...}