在React中保存本地状态

在我的应用程序中，我使用了几个Container组件。在每个Container中，有Buttons。在React中保存本地状态

根据应用的state，Buttons可点击（或不可）。 Button是否被禁用，在的本地state中管理，每个Container。应用程序的结果和状态可以保存和加载。

在这里，问题来了：当我保存（或负载）的应用程序，它比较硬“提取”的Buttons从每个Container的state。在全球储存state (Redux)相当容易。

但我怎么能挽救当地state每个Container和我怎么可以反馈给每个Container？

读取当地的state通过家长Component进行管理，该家长调用来自子女Component的方法。我知道这是一个反模式，但它的工作原理。

export class SomeConmponent { 
.... 

    onClickSaveProjecthandler(event) { 
     const localStateProjectSettings = this.childProjectSettings.getLocalState(); 
     const localStateLayerFilter = this.childLayerFilter.getLocalState(); 

     return { 
      "ProjectSettings": localStateProjectSettings, 
      "Filter": localFilter 
     }; 
     } 


    render() { 
     return(
      <ProjectSettingsContainer onRef={ref => (this.childProjectSettings = ref)}/> 
     ) 
    } 
}

有什么更好的建议吗？

来源

2017-07-19 Stophface

您已经提到终极版;为什么不使用它而不是本地状态？ –

»我知道这是一个反模式，但它起作用。«显然不是，看到你如何面对这个问题。 –

@IngoBürk我不想使用'redux'，因为灰色按钮或不是'应该*在'component' /'容器中完成的事情。没有必要重新渲染整个网站只是灰色的按钮（这将发生在我使用'REDX'！） – Stophface

正如您已经提到的那样，使用redux有一个单一的事实是一个伟大的理想。为了将状态“反馈”回容器，必须将状态和道具映射到组件。

这是从公报文档所带来的容器例如：

的连接做了所有的法宝。

来源

2017-07-19 12:34:57

我不想使用'REDX'，因为灰色按钮或不是*应该*做的事情在'component' /'container'中。没有必要重新渲染整个网站只是灰色的按钮（这将发生在我使用'REDX'！ – Stophface

听起来像你可以使用Redux，你不知何故将其体系结构误认为仅与全局状态同义。 Redux的原因之一是解决保存多个独立组件状态的问题。

但是，这里回答完全不同：为什么不使用全局状态串行器并将每个组件连接到它？如果你不喜欢引用全局变量的想法，更好的选择是创建一些与React一起工作的依赖注入（DI）框架。我已经创建了一个图书馆，名为AntidoteJS，完全是这样。你不需要使用它，但它显示了你如何完成它。只要看看the source。

这是快速和肮脏的东西。我没有测试它，但它显示了基本思路：

import { inject } from "antidotejs" 

export class MyComponent extends React.Component { 

    @inject("StateSerializer") 
    serializer 

    constuctor(props, children) { 
    super(props, children); 
    this.serializer.load(props.id); 
    } 

    setState(newState) { 
    super.setState(newState); 
    this.serializer.save(newState); 
    } 

}

来源

2017-07-19 12:38:06 samvv

我不想使用'REDX'，因为灰色按钮或不是*应该*做的事情在'component' /'container'中。没有必要重新渲染整个网站只会使一个按钮变灰（当我使用'redux'时会发生这种情况！） – Stophface

在React中保存本地状态

回答

相关问题