如何從.jsx腳本調用ReactJS元素上的jQuery函數？

Question

我剛剛開始學習ReactJS，這件事發生在我身上。

例如：

我想對reactjs元素執行的函數：

function initializeInput(selector, color) {
    // just an example function
    $(selector).css("font-size", "21pt");
}

和我的.jsx文件的一部分：

var myInput = React.createClass({
componentDidMount: function () {
    initializeInput("#" + this.props.inputId);
},
render: function() {
    return (
        <input type="text" value="text goes here" 
               name={this.props.inputName} 
               id={this.props.inputId}/>
    );
}
});

這個函數被成功調用，但沒有任何反應，似乎事情不僅僅是用jQuery和React這樣做。 將它們混合起來甚至是好的嗎？ 謝謝。

Answer 1

Jquery與Reactjs非常合作。 您可以在反應渲染之后調用jquery函數，即在componentDidMount和中

你可以為此做出反應。 讓我們說你想要一個工具提示

var myInput = React.createClass({
componentDidMount: function () {
    $(this.refs.tooltip).tooltip();
},
render: function() {
    return (
        <input ref="tooltip" type="text" value="text goes here" 
               name={this.props.inputName} 
               id={this.props.inputId}/>
    );
}
});

Answer 2

首先，您需要渲染組件元素（ render函數），然后在componentDidMount處理程序中調用您的jquery代碼

http://jsbin.com/zupagav/1/edit?js,console,output

Answer 3

我相信使用this.refs就是這樣。 我認為你不應該需要React.findDomNode 。 更多關於React文檔的引用。

var myInput = React.createClass({
  componentDidMount: function () {
    initializeInput(this.refs.inputId);
  },

  render: function() {
    return (
      <input 
        ref="myInput"
        type="text" 
        value="text goes here" 
        name={this.props.inputName} 
        id={this.props.inputId} />
    );
  }
});

這對於第三方庫（如jQuery，d3，做畫布等）非常有用。