如何从.jsx脚本调用ReactJS元素上的jQuery函数?

Mar*_*kov 5 javascript jquery reactjs

我刚刚开始学习ReactJS,这件事发生在我身上.

例如:

我想对reactjs元素执行的函数:

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

.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}/>
    );
}
});
Run Code Online (Sandbox Code Playgroud)

这个函数被成功调用,但没有任何反应,似乎事情不仅仅是用jQuery和React这样做.将它们混合起来甚至是好的吗?谢谢.

Piy*_*oor 5

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}/>
    );
}
});
Run Code Online (Sandbox Code Playgroud)