Implementierung "Zeige mehr" in ReactJs

Ich versuche, "Zeige mehr" -Funktion für meine Kommentar-Abschnitt in Reactjs zu implementieren, aber wenn ich klicke Show mehr lädt es nicht das gesamte Array, aber es entfernt den Link mehr anzeigen. Hier ist mein Code:Implementierung "Zeige mehr" in ReactJs

var CommentBox = React.createClass({ 
getInitialState: function() { 
return {limit:3 ,showMore:false}; 
}, 
showMore:function() { 
    this.setState({showMore: true, limit: this.props.comments.length}); 
}, 
render: function() { 
    var cls=[]; 
    var length=this.props.comments.length; 

    if(length >= this.state.limit){ 
     cls=[]; 
     for (var i=0;i<this.state.limit;i++) 
      cls.push(this.props.comments[i]); 
    } 
     return (
    <div className="commentBox"> 
     <CommentList data={cls} /> 

     {length> 3 &&!this.state.showMore? <div><a onClick={this.showMore} >show more</a></div>: null} 
    </div> 
); 
} 
});

jede Änderung state.comments machen nicht die Ansicht überhaupt nicht beeinflusst.

Quelle

2016-06-06 Hirad Roshandel

Sie wissen wahrscheinlich schon, dass man Requisiten nicht in den Zustand kopieren sollte. Dies führt meist zu einer Katastrophe. Ich würde vorschlagen, nur die Anzahl der sichtbaren Gegenstände im Staat zu behalten. Setzen Sie es standardmäßig auf 3 und klicken Sie auf showMehr Sie erhöhen die Anzahl der sichtbaren Elemente. – pintxo

@pintxo Ich habe getan, was Sie vorgeschlagen haben, aber es ändert immer noch nicht die Ansicht [Sie können die Bearbeitung in meinem Code sehen]. Ich muss erwähnen, dass dies wie ein Newsfeed ist und es gibt viele Elemente mit jeweils einem eindeutigen Schlüssel –

Dies funktioniert: http://jsbin.com/ceqisepewu/edit?js,console,output

es mit Ihrer Lösung Vergleichen Sie den Grund hat es nicht funktioniert.

Quelle

2016-06-06 22:16:42 pintxo

Ich tat genau das, was Sie hier haben. Initial cls hat 3 Elemente. Wenn ich auf "Zeige mehr" klicke, werden die cls auf 6 Elemente geändert, aber die Ansicht wird nicht aktualisiert. Ich fühle mich wie, weil ich eine Liste von in meinem Newsfeed habe es nicht aktualisiert. Kann es das sein? –

nvm ist es behoben! Ich habe this.props im Child-Element von this.state für die Hilfe geändert –

Implementierung "Zeige mehr" in ReactJs

Antwort

Verwandte Themen