javascript - 如何将 React 组件与 Tether.js/drop.js 一起使用

Question

我想根据页面上的用户操作在不同的 DOM 元素旁边创建并显示一个反馈模式。我能够定位模态，但每当我尝试添加信息时，它就会开始出现这些错误 - 不变违规:findComponentRoot”。我的问题是，这是使用库的正确方法吗？我该如何修复这些错误。这是相同的plunker http://plnkr.co/edit/alF7JyQAhBwcANyrQQiw

var Feedback = React.createClass({
  clickHandler: function(){
        console.log("form is submitted");
  },
  componentDidMount: function(){
    var el = this.getDOMNode();
    var drop = new Drop({
        target: document.querySelector('#test'),
        classes: 'drop-theme-arrows-bounce drop-hero',
        content: el,
        openOn: "click",
        tetherOptions: {
          attachment: 'bottom right',
          targetOffset: "0 10px"
        }
    });
  },
  render: function(){
    return (
      <div className="drop-theme-hubspot-popovers">
        <form>
          <div className="form-group">
            <label>Feedback</label>
            <input type="text" className="form-control"
                placeholder="Enter email"
                onChange={this.changeHandler}/>
            <a href="#" className="btn btn-default" onClick={this.clickHandler}>Submit</a>
          </div>
        </form>
      </div>
      );
  }  
});

var Demo = React.createClass({
  getInitialState: function(){
    return {feedback: null};
  },
  componentDidMount: function(){
    var FeedbackElement = React.createFactory(Feedback);
    var feedback = <FeedbackElement/>;
    //React.render(feedback, document.querySelector('#targetName'));
    this.setState({feedback:feedback});

  },
  render: function(){
    return (
      <div className="container">
        <div className="page-header">
            <h1>Hello</h1>
        </div>
        <div className="row">
        <div className="col-sm-12">
            <div className="col-lg-5">
                <a name="test" id="test" className="btn btn-default" onClick={this.clickHandler}> Click</a>
            </div>
        </div>
        </div>
        {this.state.feedback}
      </div>
    );
  }
});

React.render(Demo(), document.getElementById('app'));

Answer 1

我遇到了类似的问题，解决方案是创建要附加到 React 控制的树之外的元素。

我还编写了一些用于将 Tether 与 React 集成的助手，you can see them here .