React
ReactJS와 jQuery 사용하기

ReactJS와 jQuery

첫째, jquery 라이브러리를 가져와야한다. 또한 dom을 조작 할 때 findDOmNode를 가져와야합니다. 그리고 분명히 우리는 React도 가져오고 있습니다.

import React from 'react';
import { findDOMNode } from ‘react-dom’;
import $ from ‘jquery’;

우리는 아이콘이 클릭 될 때 발생하는 화살표 함수 'handleToggle'을 설정하고 있습니다. 우리는 아이콘 위에 클릭하여 참조 이름을 '토글'로 지정하여 div를 보이고 숨기고 있습니다.

handleToggle = () => {
    const el = findDOMNode(this.refs.toggle);
    $(el).slideToggle();
};

이제 참조 이름을 'toggle'로 설정해 보겠습니다.

<ul className=”profile-info additional-profile-info-list” ref=”toggle”>
  <li>
    <span className=”info-email”>Office Email</span>   [email protected]
  </li>
</ul>

div 요소는 onClick에서 'handleToggle'을 발생시킵니다.

 <div className=”ellipsis-click” onClick={this.handleToggle}>
   <i className=”fa-ellipsis-h”/>
 </div>

아래의 전체 코드를 살펴 보겠습니다.

import React from ‘react’;
import { findDOMNode } from ‘react-dom’;
import $ from ‘jquery’;

export default class FullDesc extends React.Component {
    constructor() {
        super();
    }

    handleToggle = () => {
        const el = findDOMNode(this.refs.toggle);
        $(el).slideToggle();
    };

    render() {
        return (
            <div className=”long-desc”>
                <ul className=”profile-info”>
                    <li>
                        <span className=”info-title”>User Name : </span> Shuvo Habib
                    </li>
                </ul>

                <ul className=”profile-info additional-profile-info-list” ref=”toggle”>
                    <li>
                        <span className=”info-email”>Office Email</span> [email protected]
                    </li>
                </ul>
                
                <div className=”ellipsis-click” onClick={this.handleToggle}>
                    <i className=”fa-ellipsis-h”/>
                </div>
            </div>
        );
    }
}

우리는 끝났다! 이것이 React 구성 요소 에서 jQuery를 사용하는 방법입니다.