리액트 컴포넌트의 DOM을 변환하는 JQuery 플러그인을 사용하고 있습니까?

리액트 컴포넌트의 DOM을 변환하는 JQuery 플러그인을 사용하고 있습니까?

일부 JQuery 플러그인은 DOM 노드에 동작을 추가할 뿐만 아니라 노드도 변경합니다.예를 들어 부트스트랩 스위치가

<input type="checkbox" name="my-checkbox" checked>

와 같은 것으로

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-large bootstrap-switch-animate">
  <div class="bootstrap-switch-container">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span>
    <label class="bootstrap-switch-label">&nbsp;</label>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span>
    <input type="checkbox" name="download-version" checked="" data-size="large" data-on-text="3" data-off-text="2.0.1">
  </div>
</div>

와 함께

$("[name='my-checkbox']").bootstrapSwitch();

React와 일치하지 않는 것:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0): Unable to find
element. This probably means the DOM was unexpectedly mutated (e.g., by the
browser), usually due to forgetting a <tbody> when using tables or nesting <p> or
<a> tags. ...<omitted>...`. 

이러한 플러그인을 React 구성 요소에 통합하기 위해 권장되는 기술이 있습니까?아니면 React의 가정을 근본적으로 깨서 사용할 수 없는 것일까요?

아니요, 리액션은 리액트 외부에서 자신의 컴포넌트 돔 구조를 변경하는 모든 것에 대해 나쁘게 반응합니다(하하).이건 네가 절대 하고 싶지 않은 일이야.권장되는 솔루션은 jquery 또는 유사한 플러그인으로 수행하려는 모든 기능을 반응으로 복제하는 것입니다.

그렇다고는 해도, 특정의 케이스에 대해서, 그것 없이는 할 수 없는 합리적인 방법이 있습니다만, 본질적으로는 반응하지 않는 돔을 내부에 감싼다는 것을 의미합니다.

예를 들어:

var Example = React.createClass({
    componentDidMount: function() {
        var $checkboxContainer = $(this.refs.checkboxContainer.getDOMNode());

        var $checkbox = $('<input />').prop('type', 'checkbox');

        $checkboxContainer.append($checkbox);

        $checkbox.bootstrapSwitch({});
    },
    render: function() {
        return (
            <div>
                <div ref="checkboxContainer"></div>
            </div>
        )
    }
});

물론 네스트된 div를 사용하여 구성 요소를 렌더링합니다.네스트된 div가 처음 돔에 마운트되면 jquery에 의해 체크박스가 추가되고 jquery 플러그인도 실행됩니다.

이 특정 예제의 컴포넌트에는 거의 의미가 없지만, 보다 복잡한 컴포넌트에 통합하면서 상태를 재렌더하고 상태 변경 등에 대응할 수 있는 방법을 알 수 있습니다.이벤트에 직접 반응하거나 해당 체크박스의 내용을 수정하는 기능을 상실할 뿐이며, 해당 체크박스는 존재하지 않습니다.

위의 예에서 네스트된 div를 추가/삭제하기 위한 리액션 로직이 있는 경우 삽입되는 div 주위에 체크박스를 다시 삽입하고 jquery 플러그인으로 다시 초기화하는 것과 동일한 로직이 있어야 합니다.그러나 react는 필요할 때만 dom을 변경하기 때문에 삽입된 dom 콘텐츠는 container div를 dom으로 삭제/재렌더하는 방식으로 수정하지 않는 한 삭제되지 않습니다.즉, 해당 용기 div 등에 대한 반응 내의 모든 이벤트에 계속 액세스할 수 있습니다.

,, 음, 다, 다, 다, 다, 다, 다, 다, 다, you, you, you, you, you, you을 사용할 수 있습니다.componentDidMount이벤트 또는 콜백을 체크박스 자체의 특정 상호작용에 바인드하기 위해 기능합니다.로 올바르게 바인드 해제해 주세요.componentWillUnmount또는 컴포넌트 라이프 사이클에 있어서 적절한 장소에서도 사용할 수 있습니다.

이 훌륭한 Ryanflorence 튜토리얼에서는 이 방법에 대한 아이디어를 얻을 수 있습니다.

DOM 립스 랩

방법론

1. DOM libs는 보통 DOM을 조작합니다.
2. React가 재렌더를 시도하여 지난번과는 다른 DOM을 발견하여 이상하다.
3. 렌더링 트리를 끊고 lib가 조작하는 DOM 주위에 재접속함으로써 DOM 조작을 React로부터 숨깁니다.
4. 우리 부품 소비자는 리액트랜드에 머물 수 있습니다.

네, 그런 기술이 있어요.우리는 항상 이런 일들을 하고 있다.

1. jQuery 플러그인을 랩하는 React 구성 요소를 생성합니다.
2. ★★의 render() 빈 <div ref="placeholder" />
3. componentDidMount 메서드에서는 참조별로 이 요소를 가져와 jQuery 플러그인을 초기화합니다.
4. 고객님의 고객명componentWillUnmount당신이 치워요. 또는 누수를 한 다른 파괴' 또는 메모리 누수를 방지하기 위해 필요한 기타 사항.

바로 그겁니다.다행히 리액트에서는 이 방법으로 DOM을 수정하는 것이 매우 안전합니다.

이 플러그인이 소품 변경에 반응하도록 하려면 조금 더 까다로워집니다..componentWillReceiveProps소품이 실제로 변경될 때마다 체크하고 대응하는 플러그인 메서드를 호출합니다.좀 더 자세히 설명해 드릴 수 있습니다만, 구체적인 질문이 있으시면, 전체적인 토픽이 너무 넓어서 코멘트를 할 수 없습니다.

이건 철학적 질문이야

React는 DOM 조작을 최적화하기 위해 작성되었으며, setState를 통해 컴포넌트 상태가 변경되었을 때 이면에서 많은 배선을 수행합니다.

이렇게 하면 해당 배선이 가상 DOM을 통과하여 업데이트해야 할 노드를 찾습니다.

Respect를 사용해야 하는 경우 코딩의 일관성을 유지할 것인지 여부에 관계없이 componentDidMount 내에서 JQuery DOM 조작을 적용하는 것이 최선의 방법입니다.

componentDidMount(){
    this.node = $("#"+this.props.id); // Keep a reference to the node
    this.chart = this.node.easyPieChart(); // Apply JQuery transformation and keep a reference
    this.percentTitle = this.chart.find(".percent"); // Keep a reference to the title
}

이 경우 "refresh" 메서드가 무엇이든 간에 setState에 호출하지 말고 JQuery 컴포넌트가 가지고 있는 업데이트 메서드를 호출합니다.

componentWillMount(){
   this.interval = setInterval(this._doRefresh.bind(this), 1500);
}

_doRefresh( percentage ){
    // Note how setState is NOT being called here
    percentage = percentage || Math.floor (Math.random() * 100) // simulate since we're not getting it yet
    this.chart.data('easyPieChart').update(percentage); // call easyPieChart's update
    this.percentTitle.text(percentage);
}

이 시점에서 React를 사용하는 이유를 묻는다면 이 컴포넌트는 다른 React 컴포넌트 목록의 항목이며 애플리케이션 전체에서 일관성을 유지하기 위해 사용되었습니다.비슷한 딜레마가 있을 수 있습니다.

저와는 달리 컴포넌트에 업데이트 방법이 없고 업데이트 방법을 만들 수 없는 경우 접근 방식을 완전히 재고해야 할 때일지도 모릅니다.

언급URL : https://stackoverflow.com/questions/25436445/using-jquery-plugins-that-transform-the-dom-in-react-components