Question

我有一个组件Widget，它引用Component类及其属性作为props并将其呈现。

此窗口小部件由WidgetList组件呈现，该组件映射到其状态下存储的窗口小部件列表，并在localStorage中保持列表的更新，以便可以在重新加载期间保持不变

class WidgetList extends React.Component {
  constructor(props) {
    super(props);
    const storedWidgets = JSON.parse(localStorage.getItem('widgets')) || null;
    this.state = {
      widgets: storedWidgets
    }
  }

  onChange(updatedWidgets) {
    localStorage.setItem('widgets', JSON.stringify(updatedWidgets));
    this.setState({ widgets: updatedWidgets });
  }

  render() {
    <div>
      {widgets.map(widget => (
          <div key={widget.id}>
            <Widget data={widget.data} />
          </div>
        ))}
    </div>
  }
}


const Widget = (props) => {
  const { component: Component, properties } = props.data;
  console.log(Component, properties)
  return <Component {...properties} />;
};

问题在于，当我渲染此图像时，它可以正常工作，但刷新后会失败。 console.log返回undefined的{{1}}，返回Component的正确对象。

我认为问题在于该组件没有被重新导入，但是我不知道如何解决该问题。

Answer 1

updatedWidgets应该是包含react组件的对象。问题是无法使用JSON.stringify正确地对react组件进行序列化并将其存储在localStorage

中

react组件可以是类或函数，并且它们都不能与JSON.stringify

一起使用

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

由于您不能使用JSON.stringify函数或类，因此string是唯一可行的选项，请提出在字符串和react组件之间建立映射，将字符串保存在localStorage中并稍后再转换回react组件的方法。

类似

const widgeMapping = {
    widget1: function () {
        return <div>widge functional component</div>
    },
    widget2: class extends Component {
        render() {
            return <div>widge class component</div>
        }
    }
}

const localStorageData = JSON.stringify({ component: 'widget', properties: { hello: 'world' } })
const parsedData = JSON.parse(localStorageData)
parsedData.component = widgeMapping(parsedData.component)

刷新时未定义对存储在本地存储中的组件的引用

1 个答案: