从 localStorage 存储和提取 JSX 元素答案

【问题标题】：Store and extract JSX elements from localStorage从 localStorage 存储和提取 JSX 元素
【发布时间】：2020-07-13 00:53:36
【问题描述】：

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

{
  ...
  icon: <Logo />,
  ...
}

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

render() {
  return (
    <>
      {theme.icon}
    </>
  )
}

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

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

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

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

【问题讨论】：

【解决方案1】：

为什么不将图标值更改为引用您想要的图标类型的字符串。

例子：

存储在 localStorage 中的对象：

{
  ...
  icon: "logo",
  ...
}

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

render() {
  return (
    <>
      {theme.icon === 'logo'? <Logo /> : null}
    </>
  )
}

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

render() {
  return (
    <Icon type={theme.icon}/>
  );
}

【讨论】：

【解决方案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
  ...
}

【讨论】：

是的，这是一个选项，除了我的条件比组件的类型要具体得多。因此，仅使用 JSX 对象会使事情变得更容易。但如果没有干净简单的方法来做到这一点，我会选择更传统的方法。