jQuery Plugin 사용 Pagination.js with React

Question

Reag에서 pagination 플러그인을 사용하고 싶습니다. jQuery를에 원래 사용 :

$('#demo').pagination({ 
    dataSource: [1, 2, 3, 4, 5, 6, 7, 8], 
    pageSize: 3, 
    callback: function (data, pagination) { 
     // template method of yourself 
     var html = template(data); 
     $("#dataContainer").html(html); 
    } 
}); 

내가 그것을 사용하려는은 검색 기능에 대한 반응한다. 검색 결과에 따라 데이터 소스가 변경됩니다. 또한 DOM에 검색 결과가 변경됩니다.

이 검색 결과의 용기이다

<MovieList data={this.state.searchList} handleAdd={this.addList}/> 

searchList 상태가 갱신된다.

이

는 MovieList 성분이다

var MovieList = React.createClass({ 

renderTemplate: function (data) { 
    return data.map(function (movie) { 
     return <Movie data={movie} onAdd={this.props.handleAdd}> 
     </Movie>; 
    }); 
}, 

componentDidMount: function() { 
    $(ReactDOM.findDOMNode(this)).pagination({ 
     dataSource: this.props.data, 
     pageSize: 6, 
     callback: function (data, pagination) { 
      // template method of yourself 
      var html = this.renderTemplate(data); 
      $(this.children).html(html); 
     } 
    }).bind(this); 
}, 

componentWillUnmount: function() { 

    $(ReactDOM.findDOMNode(this)).pagination('destroy'); 
}, 

render: function() { 
    return (
     <div className={this.props.className}> 
      <div className="data-container"></div> 
     </div> 
    ); 
} 

});

는 componentDidMount에 바인드 후, 나는 그것을 업데이트 할 componentWillReceiveProps 또는 다른 라이프 사이클 방법을 사용 하는가?

후속 질문 :

나는 반응하는 완전히 새로운 해요. 나는 어떻게 반응 라이브러리를 사용할 지 모른다. 온라인 자료에서, 나는 npm에 의해 React 구성 요소를 설치해야한다는 것을 알게되었습니다. 나는 결코 npm을 사용하지 않았다. 내 프로젝트에서는 Django + React를 사용했습니다. 또한 다음과 같은 참조를 포함하는 고전적인 방법 만 사용합니다.

<script src={% static 'pages/js/jquery-1.11.1.min.js' %}></script> 
<script src={% static 'pages/bootstrap/js/bootstrap.min.js' %}></script> 
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> 
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> 
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> 

npm 설치로 React 라이브러리를 어디에 설치해야합니까? 프로젝트의 현재 구조를 변경하고 싶지 않은 경우 어떻게 사용합니까?

Answer 1

먼저 React 내에서 jquery를 시도해야합니다. 이 문서를 통해 읽어보십시오. "http://tech.oyster.com/using-react-and-jquery-together/"

상태를 설정하면 렌더링 방법이 호출되지만 상태에 의해 업데이트 된 속성은 렌더링 방법에 설정되어야합니다. 귀하의 jquery 코드는 업데이트 된 상태를 인식하지 못합니다. 상태 값은 Movielist 함수의 속성 일뿐입니다. Jquery는이를 읽을 방법이 없습니다.

두 번째로 componentWillRecieveProps는 부모 또는 다른 구성 요소에서 프롭이 업데이트 될 때 호출되며, render가 호출되기 전에 set에 대해 유효성 검사 또는 계산을 수행하는 데 사용됩니다.

마지막으로 https://github.com/ultimate-pagination/react-ultimate-pagination을 페이지 매김에 사용할 수 있습니다. 매우 유연한 부트 스트랩, MUI 및 일부 사용자는 자신 만의 스킨을 작성할 수 있습니다.

Answer 2

이 문제는 "DataTable"자바 스크립트 기능을 사용할 수 있습니다. https://www.datatables.net/을 참조하십시오.

여기에 테이블 ID를 아래 코드로 입력하면됩니다.

$(document).ready(function(){ 
    $('#myTable').DataTable(); 
});