.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는 Reactj와 잘 작동합니다. 반응 렌더링 후 componentDidMount에서 jquery 함수를 호출 할 수 있습니다. 즉

당신은 ref에 반응 할 수 있습니다. 당신은 그때 this.refs를 사용하여 믿고 componentDidMount 핸들러

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

Answer 2

먼저 (render 기능) 할 경우를 설명하는 방법입니다. 나는 너에게 React.findDomNode이 필요하다고 생각하지 않는다. the React docs의 심판에 대해 자세히 알아보십시오.

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, 캔버스 물건을, 그리고 더와 함께 사용하기에 유용합니다.

Answer 3

에 jQuery 코드를 호출하면 구성 요소를 렌더링 할 필요가 툴팁

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}/> 
    ); 
} 
});