Храните и извлекайте элементы JSX из localStorage - PullRequest
Новая
       6

Храните и извлекайте элементы JSX из localStorage

1 голос
/ 01 апреля 2020

В моем приложении React я храню объект javascript в localStorage. Этот объект представляет тему, используемую в приложении. Проблема состоит в том, что один из компонентов этого объекта является элементом JSX: 

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

Затем я использую этот объект во всем приложении: 

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

Проблема теперь когда я сохраняю этот объект в localStorage с использованием JSON.stringify(), объект JSX 'нарушается' и больше не считается объектом React после использования JSON.parse().

Если я посмотрю на localStorage, то icon элемент хранится так: 

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

Итак, у вас есть идея, что я могу сохранить, извлечь и затем использовать элемент JSX из localStorage?

Ответы [ 2 ]

2 голосов
/ 01 апреля 2020

Почему бы не изменить значение значка на строку, указывающую, какой тип значка вы хотите.

Пример:

объект, сохраненный в localStorage: 

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

и в своем коде просто задайте условие: 

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

или создайте компонент Icon generi c, который принимает тип значка в качестве реквизита и отображает правильный: 

render() {
  return (
    <>
      {<Icon type={theme.icon}/>}
    </>
  );
}
2 голосов
/ 01 апреля 2020

Вы не должны хранить ссылки на реагирующие компоненты внутри строки, и 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
  ...
}
...