javascript - 如何将库函数绑定(bind)到reactjs类/内容

Question

我是 ReactJS 的新手，它非常酷。然而，我不清楚的一件事是如何在 React 中使用第三方库及其 DOM 函数。我当前的情况是我使用jQuery custom content scrollbar它通过以下方式操作 DOM 元素:

(function($){
    $(window).load(function(){
        $('./#element').mCustomScrollbar();
    });
})(jQuery);  

我的问题是它没有将其自身附加到我的 ReactJS 元素，即:

var ChatBox = React.createClass({
  render: function() {
    var chatMessages = this.props.data.map(function (msgObj) {
      return (
        <ChatBoxMessage user_name={msgObj.user.name} timestamp={msgObj.timestamp}>
          {msgObj.message}
        </ChatBoxMessage>
      );
    });
    return (
        <div className="log log--chat">
            <ul>    
                {chatMessages}
            </ul>
        </div>
    );
  }
});

现在，如果我在控制台中使用 $('.log--chat').mCustomScrollbar(); ，它可以正常工作，因此我的所有内容都已正确加载，但我可以'让它自己将自己附加到元素上。

解决这个问题的一般做法是什么？我是否将它绑定(bind)到实际的 React 类中的某个地方？

Answer 1

我不确定你所说的“我无法让它自己将其自身附加到元素上”是什么意思。但这可能就是您所追求的:

...
componentDidMount: function() {
  var node = React.findDOMNode(this);
  $(node).mCustomScrollbar();
}
...