框架7 - 反应应用程序中的全局状态

Question

我的数据需要一个集中存储解决方案。在我的购物车项目或用户凭据的示例中。但我想使用React的生命周期。因此，当数据更改时，我的应用程序应该再次呈现DOM树。

框架7提供“数据”和“参数”属性，我可以通过“this。$ f7”对象在每个页面上访问。但是当数据发生变化时，没有“setData”函数来重新渲染DOM。

Answer 1

我实现了我的应用程序的上下文：

import UserContext from '../context/UserContext';

export default class extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      shoppingcartitems: [],
    }
  }

  render(props) {
    return (
      <UserContext.Provider value={{ 
            state: this.state, 
            setState: function(param){this.setState(param)}.bind(this)
        }}>
      <App params={f7params} onInit={this.onInit()}>
        ...
      </App>
      </UserContext.Provider>
      );
  }
}

现在我可以在我需要的每个其他文件中访问它：

import UserContext from '../../context/UserContext';

export default class CartPage extends React.Component {
    static contextType = UserContext;

    componentDidMount() {
        console.log(this.context.state);

        this.context.setState({ hello: "World!"});
    }

}