條件react.js渲染拋出錯誤

Question

在react.js應用程序中，我有一個Tip組件，該組件使用Tether庫作為mixin，以便將其附加到需要技巧的其他組件上。 這很好用，但是當用戶單擊關閉鏈接時，如何刪除筆尖讓我有些困惑。

經過一番閱讀之后，看來最佳實踐似乎是從技巧組件中調用父級傳遞的方法，該方法不會在下一次傳遞時呈現該組件。 不幸的是，當我這樣做時，我收到一條錯誤消息：

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 2 of element. This probably means the DOM was unexpectedly mutated

第一個問題是，是否有插入筆尖的更好方法？ 如果您檢出getTip()方法，這似乎很難做到有條件地插入組件。

第二個問題是為什么會出現上述錯誤。

謝謝你的幫助。

這是代碼：

父組件

React.createClass({

    getTip: function() {
        if (!this.state.showTip) return React.createElement('div', null, '');

        return React.createElement(Tip, {
            closeText: 'Got it!',
            destroy: this.removeTip,
            attachment: 'top center',
            targetAttachment: 'bottom center'
          },
          'Click outer arrows to skip by the week and inner arrows to skip by the day.');
    },

    removeTip: function() {
      this.setState({showTip: false});
    },

    render: function() {
        var tip = this.getTip();

        return (
          <div className="page">
            <header>
              <div className="dates__header__details">
                <!-- stuff -->

                {tip}
              </div>
              ...   
})

尖端組件

var React = require('react');
var Tether = require('../tether/tether');

var Tip = React.createClass({

  mixins: [Tether],

  propTypes: {
    destroy: React.PropTypes.func.isRequired
  },

  getInitialState: function() {
    return {
      isVisible: true
    }
  },

  remove: function() {
    this.setState({isVisible: false});
    setTimeout(function() {
      this.props.destroy();
    }.bind(this), 500);
  },

  render: function() {
    // ...

    return (
      <div className={classList}>
        {this.props.children}

        <div className="tip__close" onClick={this.remove}>{this.props.closeText}</div>
      </div>
    );
  }

});

系鏈組件

var React = require('react');
var T = require('../../../../../bower_components/tether/tether');

var Tether = {

  propTypes: {
    attachment: React.PropTypes.string.isRequired,
    targetAttachment: React.PropTypes.string.isRequired
  },

  componentDidMount: function() {
    var el = this.getDOMNode();

    var tether = new T({
      target: el.parentNode,
      element: el,
      attachment: this.props.attachment,
      targetAttachment: this.props.targetAttachment
    });

    this.setState({'tether': tether});
  },

  componentWillUnmount: function() {
    var t = this.state.tether;
    t.destroy();
  }
};

module.exports = Tether;

Answer 1

根據反應文檔，隱藏元素是建議的方法。