在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中保存本地狀態

回答

相關問題