2016-06-06 2 views
0

Reactj의 내 의견 섹션에 "더보기"기능을 구현하려고하는데, 더보기를 클릭하면 더 많은 링크가 표시되지 않지만 전체 배열은로드되지 않습니다.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> 
); 
} 
}); 

모든 뷰에 영향을주지 않습니다 state.comments에 대한 변경을 : 여기 내 코드입니다.

+1

당신은 이미 소품을 주에 복사해서는 안된다는 것을 이미 알고 있습니다. 이로 인해 대개 재앙이 발생합니다. 나는 국가에 보이는 품목의 수만 지키기를 제안 할 것이다. 기본적으로 3으로 설정하고 showMore를 클릭하면 표시되는 항목의 수를 늘립니다. – pintxo

+0

@pintxo 당신이 제안한 것을 했는데도 여전히 뷰를 변경하지 않습니다. [내 코드에서 편집을 볼 수 있습니다]. 나는 이것이 뉴스 피드와 같다고 말해야하고, 고유 한 키를 가진 요소가 많이 있습니다. –

답변

1

이 작동 : http://jsbin.com/ceqisepewu/edit?js,console,output

당신의 솔루션을 비교하고 그것이 작동하지 않은 이유를 찾을 수 있습니다.

+0

여기에있는 것과 정확히 일치합니다. 처음에는 cls에 3 가지 요소가 있습니다. 더보기를 클릭하면 cls가 6 개 요소로 변경되지만 뷰는 업데이트되지 않습니다. 내 뉴스 피드에 의 목록이 있으므로 업데이트하지 않는 것 같습니다. 그럴 수 있니? –

+0

nvm 해결되었습니다! 내가 이걸 바꿨어. 상태는 도움을 청 해준 덕분에 의 자식 요소에서 나온거야. –