Question

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

Framework 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!"});
    }

}

Framework7-React应用程序中的全局状态

1 个答案: