[JS 6] React a dedicnost komponent rubrika: Programování: JavaScript
7
xxar3s
mam komponentu TableList a od nej dedim komponentu EditableTableList (este neni hotova)
Kompomnetu vnaram do kontainera, ktoremu nastavujem atribut id ten, ale nastavujem aj povodnej komponente TableList. Ako teda nastavit rodicovskej(vnorenej) komponente hodnotu attributu id na undefined? Ked som v konstruktore odstranil atribut id z props nic sa nestalo:
class EditableTableList extends TableList { constructor(props) { super(Immutable.Map(props).filter((v, k) => k !== 'id').toJS()); } render() { return ( <div id={this.props.id} className='editable-table-list'> {super()} </div> ) } }
Toto riesenie sice funguje, ale pride mi to ako prasarna:
class EditableTableList2 extends TableList { constructor(props) { super(props); } render() { var id = this.props.id; delete(this.props.id); var result = ( <div id={id} className='editable-table-list'> {super()} </div> ) this.props.id = id; return result; } }
Pouzivam react s prepinacom --harmony (ECMA Script 6) a k tomu kniznucu immutable.js na pracu s kolekciami.
3
tomas_3
Ako vravel Obcan, nerob to.
Ja by som este dodal ze nielen kvoli reactu. Toto je typicky priklad zleho navrhu z OOP dedicnost vs kompozicia. Dedicnost je vztah is-a a kompozicia has-a. Dedicnost je najsilnejsi vztah tried, ktory nie je mozne oddelit bez prepisania kodu. Tu funkcionalitu nemozes dalej prepouzivat a zvycajne takyto navrh vedie k ohybaniu zdrojovej triedy aby poskytovala funkcionalitu ktoru nikdy nemala a implementuje ju len podtrieda. Cele to ma tusim nazov Liskov substitution principle (http://en.wikipedia.org/wiki/Liskov_substitution_principle).
Tuto je editovatelna tabulka, ale co keby som chcel aby bol editovatelny strom? Budem vytvarat EditableTree? Tu sa ovela viac hodi kompozicia. Urobim si raz komponent Editable a ten potom obali TableView aj TreeView.
Ak som dobre pochopil, tak len tabulku potrebujes mat v div s nejakou classou. Ja by som si urobil komponentu Editable, kde by som jednak predal props co chcem predat nizsie, a druhak este factory metodu ktora by isla do render.
Priklad:
class Editable { render() { return React.DOM.div({className: 'editable-table-list'}, this.props.newItemComponent(this.props)); } }
V kode to potom pouzijes nejak takto:
render() { return Editable({...., newItemComponent: TableList}); }
Komentáře
-
xxar3s
:
To je dost diskutabilne ci by editovatelna tabulka mala obsahovat vnorenu needitovatelnu tabulku, alebo naopak mala byt jej potomkom - pretoze len rozsiruje vlastnosti povodnej tabulky (to ze ju zanorujem do divu kde chcem pridat jeden button, je len implementacny detail). Tiez si myslim ze dedicnost je velakrat cesta do pekla, otazka je ci aj v tomto pripade. Tiez som v povodnom navrhu editableTable poskladal z divu vnoril dfo nej Table ale... Ked je EditableTable potomkom Table tak ju mozem pouzit vsade tam kde som pouzival povodnu Table a o tuto vyhodu by som nerad prisiel. ........................................... ale uz mam tento problem vyrieseny.
—
30.3.2015
-
tomas_3
:
To bol priklad na to co bolo v otazke. V skutocnosti pri editovatelnej tabulke je editovatelna az konkretna bunka. Tabulka je zlozena z riadkov a ten z buniek. Takze treba nejaky "Renderer" co vrati pre konkretnu hodnotu bud ReadOnlyBunku alebo Editable bunku. Takze cela kompozicia je napr z Table, TableDataProvider (kludne array of array), Cell, InputCell, SelectCell atd...
—
31.3.2015
Pro zobrazení všech 2 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře