2014-12-29 3 views
2

방금 ​​React를 사용하기 시작했으며 두 번 나 자신에게 생각했습니다. "왜 componentDidRender 이벤트가 없습니까?"React.js : componentDidRender 이벤트가없는 이유는 무엇입니까?

DOM에 테이블을 렌더링하는 구성 요소가 있고이 테이블에 bootstrap-sortable을 사용하여 원하는 모든 열을 사용자가 정렬 할 수 있도록한다고 가정 해 보겠습니다. bootstrap-sortable의 경우, 테이블을 그린 후에 $.boostrapSortable()을 실행하여 플러그인을 초기화해야합니다.

  • componentDidMount : 다음 DOM이 될 것 같지 않기 때문에이 작동하지 않습니다 내가보기로

    ,이 목적을 위해 사용하는 고려하는 것이 논리적 일 것 반작용 구성 요소에 두 핸들러가있다 이 시점에서 업데이트됩니다.

  • :이 작업은 가능하지만 초기 렌더링에서는 실행되지 않습니다.

React에는 실제로 componentDidRender 함수가 누락되었다고 말하는 것이 아닙니다. 왜 거기에없는 이유에 관해서는 완벽하게 논리적 인 설명이 있다고 가정하기 때문입니다. 나는 누군가가 그러한 기능이 왜 존재하지 않는지 설명 할 수 있는지, 그리고 위와 같은 경우를 다루는 "반응 방식"이 무엇인지를 묻는 것이다.

답변

4

에서 this.getDOMNode()을 사용하면 해당 구성 요소의 기본 DOM에 대한 참조를 얻을 수 있습니다. 당신이 jQuery를 사용하여 설치 구성 요소를 사용 하시겠습니까 그렇다면 당신은 할 수 있습니다 :

http://jsfiddle.net/sa5e88ys/1/

:

componentDidMount: function() { 
    $(this.getDOMNode()); 
} 
다음

http://facebook.github.io/react/docs/working-with-the-browser.html

jQuery를이 반응 구성 요소의 DOM 노드에 작용 보여주는 바이올린의

보시다시피 예상대로 div에 테두리를 추가합니다. 아직도 문제가있는 경우 jQuery가 아닌 플러그인을 사용하거나 반응 할 수 있다고 생각하십니까? (모든 렌더링 후에 호출하지만 첫 번째입니다)

+0

예,이 모든 좋은,하지만 componentDidMount 너무 일찍 수명주기에서처럼 여전히 보인다 작동하는 플러그인. 나는 $ .bootstrapSortable()을 100ms의 타임 아웃 절 안에 넣고 테스트했다. 타임 아웃을하지 않으면 작동하지 않습니다. –

+0

나는 내 대답을 조금 편집했다. –

+0

당신 말이 맞아요, 그것은 라이프 사이클의 정확한 시간에있는 것처럼 보입니다. bootstrap-sortable에 문제가있을 수 있습니다. –

3

componentDidRender이 없다하더라도, 당신이 원하는 행동하는 방법을 만들 수 있고 (첫 번째 렌더링 이후에만 호출되는) 모두 componentDidMount에 전화 및 componentDidUpdate.

또한,이 구성 요소 내에서 DOM 노드에 심판을 받고 선호하는 방법입니다 : https://facebook.github.io/react/docs/refs-and-the-dom.html

관련 문제