reactjs - vstupní pole rendering v hierarchii

hlasů
0

Stavím jednoduchý Reagovat aplikace s následující strukturou hierarchie komponent:

--- ReqList (zobrazuje seznam Poptávka zboží)

------ ReqListHeader (A div, že má název seznamu a několik tlačítek)

------ ReqTable (seznam žádostí položek)

--------- ReqRow (jeden řádek požádání)

------------ ReqItemHeader

------------ ReqItemBody

------------ ... Několik dalších složek v rozmezí

--------------- ReqEditor

------------------ TextArea

Kořenová složka přijímá data přes ajax volání a volá setState (data), podle standardních Docs Reagovat a všechno je v pořádku, a to funguje správně. Jsem schopen zobrazit všechny potomka komponenty a jejich hodnoty.

Nicméně pro vstup formuláře (textarea), vstup se nemění. Chápu, že budu muset implementovat změny psovoda. Jde o to, že já jsem jisti, je-li to provést?

  • Varianta I: nejprve jsem si myslel, tak bych jen přidat funkci changeHandler v jeho bezprostřední vlastník voláním setState () na ní. Obávám se však, že jsem prolomení principu jednosměrný tok dat zavedením stavu v součásti střední úrovně.

  • Varianta II: Mám projít changeHandler zpětné volání jako vlastnost z říkat „ReqRow“ složky po celou cestu až do ReqEditor, takže by to mohlo být vázáno na události change textarea?

  • Varianta III: Nebo bych měl začít v kořenu hierarchie tj ReqList? Je tomu tak proto, dokonce ReqRow přijímá data ze svého majitele a jeho rodiče, a tak dále, protože to je vstupní bod pro data.

Nejsem si příliš jistý, úroveň šíření vzhůru, že bych měl dělat v tomto případě. Většina příkladů jsou jednoduché ty s dvouúrovňové hierarchie. Jsem si jist, že to lze udělat, ale zahrnuje průchod dolů se změnou psovod o zpětné volání po celou cestu od jeho velkého dítěte.

Je to pravda, nebo je nějaký jiný lepší způsob?

Položena 11/11/2015 v 08:04
uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
1

Problém vaše čelí, je řešen pomocí některého z implementací tavidla vzoru. Reagují pouze poskytuje řešení pro data vykreslování součástí, ale neposkytuje žádné ponětí o tom, jak zpracovat datový tok.

Flux je vzor navržený Facebook, který se snaží strukturu aplikace, takže změny v datech jsou zvládnutelné v čistém způsobem.

Z Flux dokumentace :

Všechna data protéká dispečera jako centrální rozbočovač. Akce jsou poskytovány dispečerovi při způsobu akce tvůrce, a nejčastěji pocházejí z uživatelských interakcí s výhledem. Dispečer poté dovolává zpětná volání, které obchody byly registrovány s tím, dispečerské činnosti na všech prodejnách. V rámci svých registrované zpětná volání, obchody reagovat podle toho, co akce jsou důležité pro stav jejich zachování. V obchodech pak vysílají událost změny upozornit Controller názory, že došlo ke změně datové vrstvy. Řadič zobrazení naslouchat těmto událostem a načítat data z prodejen v obsluze události. Regulátor-views volat svou metodu vlastní setState (), což způsobilo opětovné vykreslování sebe a všechny jejich potomky ve stromu složek.

Tato hustá odstavec je souhrn řešení vašeho problému.


EDIT : Můžete také využívat baobab , knihovnu, která nabízí inmutable strom dat, která vydává události, když jsou aktualizovány některé pole (nebo jejich děti). Takže každá složka poslouchá na změny na polích, které potřebuje. K dispozici je balíček pro integraci s Reagovat . Použil jsem to a funguje to skvěle.

Odpovězeno 11/11/2015 v 08:58
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more