web-dev-qa-db-ja.com

React.jsノードのアンマウント

this._rootNodeIDでReact.jsノードをアンマウントしようとしています

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

ただし、falseを返します。

handleClickは要素をクリックすると起動され、ルートノードをアンマウントする必要があります。 unmountComponentAtNodeに関するドキュメント こちら

私もこれを試しました：

React.unmountComponentAtNode（$（ '* [data-reactid = "' + this._rootNodeID + '"]'）[0]）

このセレクターはjQuery.hide()で機能しますが、アンマウントでは機能しません。ドキュメントでは、React.renderComponentで使用するように、DOMElementである必要があると記載されています

さらにいくつかのテストの後、some要素/セレクターで動作することがわかりました。

それは何らかの形でセレクターで機能します：document.getElementById('maindiv')、ここでmaindivはReact.jsで生成された要素ではなく、単なるhtmlです。次に、trueを返します。

しかし、React.jsで生成された別のElementByIdを選択しようとするとすぐに、falseを返します。そして、document.bodyでも動作しませんが、console.logでそれらはすべて本質的に同じものを返します（getElementsByClassName('bla')[0]も動作しません）

thisを介してノードを選択する簡単な方法があるはずです。jQueryや他のセレクターに頼ることなく、どこかにあることがわかります。

javascriptreactjs
47
TrySpace

コンポーネントをマウントするのと同じDOM要素からコンポーネントをアンマウントします。

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

次に、次のコマンドでアンマウントします。

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

ここに 単純なJSFiddle があります。ここでコンポーネントをマウントし、3秒後にアンマウントします。

76
Michael LaCroix

これは私のために働いた。 findDOMNodeがnullを返す場合、追加の予防措置を講じることができます。

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

私が使用する例：

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

handleClick: function() {
  this.unmount();
}
6
Danil Pismenny

コンポーネントのマウントを解除する必要はありません。状態を変更し、空の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>
  }
});
2
miguel savignano

提出したGitHubの問題 で述べたように、コンポーネントのDOMノードにアクセスしたい場合は、this.getDOMNode()を使用できます。ただし、コンポーネントはそれ自体をアンマウントできません。正しい方法については、マイケルの答えをご覧ください。

1
Paul O'Shannessy

最初に、reactjsが初めてです。もちろん、stateを切り替えることでコンポーネントをすべて制御できますが、試してみると、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 でサンプルコードを実行し、tryを実行します。

注：サンプルコードでは、reactjsバージョンの問題としてReact.findDOMNodeがgetDOMNodeに置き換えられています。

0
monjer