Question

我有一个与浏览器的localStorage相关联的react应用。在应用程序启动时，将使用运行该应用程序所需的所有数据填充localStorage。这些数据使用AJAX从XML文件中提取，并构建为一个localStorageObject，Web应用程序可以将其用作信息的“数据库”，以从...中提取内容。

目前，主要组件的状态已设置为本地存储。因此，基本上我有以下内容：

  constructor(props) {
    super(props);
    this.state = {
      courseData : JSON.parse(localStorage.getItem("storageID"));,

    }
  }

状态包含一个对象，该对象是localStorage的整体。现在，我有许多子组件，它们本身也有子组件。有些组件只需要渲染一次，而其他组件则需要通过用户交互来重新渲染。

阅读后，似乎有很多方法可以实现解决方案。我可以让所有组件都具有状态，但这不是必需的。我可以让主要组件具有状态，而没有其他组件具有状态。并且只要主要组件的状态发生变化，道具就会被确定下来并重新更新。

有没有一种最佳方法？

Answer 1

此方法有效，但是。

首先，localStorage调用应该在componentDidMount函数上。否则，它将无法在服务器端渲染的情况下使用。

第二，我将在父函数上实现所有初始数据获取，然后将数据传递到反应树的根：

const localStorageData = localStorage.getItem('some_data')

ReactDom.render(
  document.getElementById('my-element'),
  <MyComponent
     localStorageData={localStorageData}
   />
)

Answer 2

如果有很多子组件，由于深度嵌套，将很难管理状态。我建议对本地存储实现使用高阶组件，并将其传递给子级。在这里我要怎么做：

 import React from 'react';
var HigherOrderComponent = (Component) =>
  class  extends React.Component {

    state={locStorage:{}}

    componentDidMount(){

        this.setState({locStorage:window.localStorage.getItem("data")})
      }


    render() {
      return (
        <Component
            locStorage={this.state.locStorage}
        />
      )
    }
  };

export default HigherOrderComponent;


import HigherOrderComponent  from './HigherOrderComponent'
const ChildComponent = ({locStorage}) => {
    console.log(locStorage)
    return (
        <div>

        </div>
    );
};

export default HigherOrderComponent(ChildComponent);

主组件是否可以/应该是React JS中唯一具有状态的组件？

2 个答案: