React.js 노드 마운트 해제 중

React.js 노드 마운트 해제 중

React.js 노드를 마운트 해제하려고 합니다.this._rootNodeID

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

하지만 다시 돌아온다false.

그handleClick요소를 클릭하면 부팅되며 루트 노드를 마운트 해제해야 합니다.에 관한 문서unmountComponentAtNode 여기서

이것도 해봤어요.

React.unmount ComponentAtNode($('*[data-reactid=')+this)._rootNode(루트 노드)ID+'''''[0])

그 셀렉터는,jQuery.hide()단, 언마운트에서는 사용할 수 없습니다.다만, 메뉴얼마운트할 필요가 있습니다.DOMElement예를 들어,React.renderComponent

몇 번 더 테스트한 결과 일부 요소/선택기에서 작동한다는 것이 밝혀졌습니다.

셀렉터에서는 어떻게든 동작합니다.document.getElementById('maindiv'),어디에maindiv는 React.js에서 생성되지 않은 요소로, 그냥 플레인 html입니다.그리고 그것은 돌아옵니다.true.

그러나 React.js에서 생성된 다른 ElementById를 선택하면 false가 반환됩니다.그리고 그건 잘 안 될 거야document.body어느 쪽이든 console.log를 사용하면 기본적으로 모두 같은 것을 반환합니다.getElementsByClassName('bla')[0]동작하지 않음)

노드를 선택하는 간단한 방법이 있습니다.thisjQuery나 다른 셀렉터에 의존할 필요 없이 어딘가에 있다는 것을 알고 있습니다.

컴포넌트를 마운트한 것과 동일한 DOM 요소에서 컴포넌트를 마운트 해제합니다.예를 들어, 다음과 같은 작업을 수행할 수 있습니다.

ReactDOM.render(<SampleComponent />, document.getElementById('container'));

그런 다음 다음을 사용하여 마운트 해제합니다.

ReactDOM.unmountComponentAtNode(document.getElementById('container'));

컴포넌트를 마운트하고 3초 후에 마운트 해제하는 간단한 JSFidle을 나타냅니다.

이건 나한테 효과가 있었어.다음과 같은 경우 각별한 주의를 기울이는 것이 좋습니다.findDOMNodenull을 반환합니다.

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);

사용하는 예는 다음과 같습니다.

unmount: function() {
  var node = this.getDOMNode();
  React.unmountComponentAtNode(node);
  $(node).remove();
},

handleClick: function() {
  this.unmount();
}

컴포넌트를 마운트 해제할 필요가 없습니다.단순한 솔루션은 상태를 변경하고 빈 div를 렌더링합니다.

const AlertMessages = React.createClass({
  getInitialState() {
    return {
      alertVisible: true
    };
  },
  handleAlertDismiss() {
    this.setState({alertVisible: false});
  },
  render() {
    if (this.state.alertVisible) {
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Oh snap! You got an error!</h4>
        </Alert>
      );
    }
    return <div></div>
  }
});

당신이 제출한 GitHub 문제에서 언급했듯이, 컴포넌트의 DOM 노드에 접근하고 싶다면, 당신은 사용할 수 있습니다.this.getDOMNode()단, 컴포넌트는 마운트 해제할 수 없습니다.올바른 방법은 마이클의 답변을 참조하십시오.

우선, 저도 reactjs에 익숙하지 않습니다.물론 상태를 전환함으로써 컴포넌트를 모두 제어할 수 있습니다.그러나 테스트하려고 하면, 그것을 알 수 있습니다.React.unmountComponentAtNode(parentNode)렌더링된 컴포넌트만 마운트 해제할 수 있습니다.React.render(<SubComponent>,parentNode).그렇게<SubComponent>제거되는 것은 에 의해 설명되어야 한다.React.render()method, 그래서 나는 코드를 쓴다.

<script type="text/jsx">

    var SubComponent = React.createClass({
        render:function(){
            return (
                    <div><h1>SubComponent to be unmouned</h1></div>
            );
        },
        componentWillMount:function(){
            console.log("componentWillMount");
        },
        componentDidMount:function(){
            console.log("componentDidMount");
        },
        componentWillUnmount:function(){
            console.log("componentWillUnmount");
        }

    });

    var App = React.createClass({

        unmountSubComponent:function(){
            var node = React.findDOMNode(this.subCom);
            var container = node.parentNode;
            React.unmountComponentAtNode(container);
            container.parentNode.removeChild(container)
        },

        componentDidMount:function(){
            var el = React.findDOMNode(this)
            var container = el.querySelector('.container');
            this.subCom = React.render(<SubComponent/> ,  container);
        },

        render:function(){

            return (
                <div className="app">
                    <div className="container"></div>
                    <button onClick={this.unmountSubComponent}>Unmount</button>
                </div>
            )
        }
    });

    React.render(<App/> , document.body);
</script>

jsFiddle에서 샘플코드를 실행하여 시도합니다.

주의: 샘플 코드React.findDOMNode에 의해 대체됩니다.getDOMNodereactjs 버전 문제로 간주됩니다.

언급URL : https://stackoverflow.com/questions/21662153/unmounting-react-js-node