Recent m-am apucat sa invat React. Am urmat tutorialul oficial si am incercat sa-l dezvolt ca sa invat. Am vrut sa adaug o noua functionalitate, si anume ce-a de stergere a unui comentariu. M-am blocat la partea in care trebuie sa fac comunicarea de la componenta < Comment /> la < CommentBox />. Problema este ca intre cele doua mai exista, < CommentList />. Deci nu e vorba de child -> parent, ci de child -> parent -> grandparent.
Codul de pana acum: http://pastebin.com/7sHNYJwt . Este vorba despre functia handleRemoveComment
Nu cunosc acest react, dar cunosc arhitectură.
Ideea de a șterge ceva implică întrebarea “din cadrul cui ștergi?” iar răspunsul este “din lista de comentarii”.
Un comentariu nu se șterge pe sine, ci containerul decide ce copii șterge.
Așadar ai relația self -> parent, unde self e lista de comentarii.
Iar X-ul din interfață aparține și el tot listei dpv logistic.
Astfel, cu o arhitectură corectă, problema nici nu are șansa de a apare.
Dacă impulsul tău primar va fi să te gândești că s-ar repeta cod, atunci gândește-te la decorator: https://en.wikipedia.org/wiki/Decorator_pattern
Decoratorul decorează câte un comentariu, se comportă ca un comentariu din exterior văzut, și adițional adaugă acel X în interfață și triggers an event când X e apăsat.
2 Likes
Nu am testat dar asa cum ai in exemplul de la ei:
this.props.onCommentSubmit({author: author, text: text});,
onCommentSubmit={this.handleCommentSubmit}
si handleCommentSubmit: function(comment) { …}
daca urmaresti firul executiei observi ca poti face referire unei functii din parinte prin proprietatile unui copil si presupun ca si copilul copilului poate face referire mai departe in acelasi mod, practic cred ca trebuie sa pasezi din proprietate in proprietate pana ajungi in scope-ul unde ai acces la state-ul pe care vrei sa-l modifici.
De fapt uite: https://facebook.github.io/react/tips/communicate-between-components.html 
2 Likes
Link-ul postat de @tachyean contine solutia.
Demo (pentru simplificare, am renuntat la ajax si am pastrat doar listing-ul).
1 Like
Din pacate nu am avut timp sa integrez, dar mi-am rezervat timp astazi pentru asta, asa ca o sa revin cu un edit. Multumesc.
Am integrat acum, e prefect, exact ce trebuia. Multumesc la toti. Daca se poate, o sa postez in thread-ul asta urmatoarele probleme pe care o sa le confrunt pe parcursul invatarii.
1 Like