从 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 中的对象：

{

  ...

  icon: "logo",

  ...

}

并在您的代码中创建一个条件：

render() {

  return (

    <>

      {theme.icon === 'logo'? <Logo /> : null}

    </>

  )

}

或制作一个 Icon 通用组件，将图标类型作为道具并呈现正确的：

render() {

  return (

    <Icon type={theme.icon}/>

  );

}

Answer 2

您不应该将 react 组件引用存储在字符串中，并且 JSON.stringify 无法正确序列化它们（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify）。

我建议您将组件替换为它的名称（或某个键），然后您将使用它来呈现适当的组件：

{

  ...

  icon: 'Logo', // then render the appropriate component based on this

  ...

}