ReactJS 與 jQuery

首先，你必須匯入 jquery 庫。我們還需要匯入 findDOmNode，因為我們要操作 dom。顯然我們也在匯入 React。

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

我們設定了一個箭頭函式’handleToggle’，當點選一個圖示時它會觸發。我們只是顯示並隱藏一個帶有引用命名’toggle’on 的 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>   me@shuvohabib.com
  </li>
</ul>

我們將在 onClick 上觸發’handleToggle’的 div 元素。

 <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> me@shuvohabib.com
                    </li>
                </ul>
                
                <div className=”ellipsis-click” onClick={this.handleToggle}>
                    <i className=”fa-ellipsis-h”/>
                </div>
            </div>
        );
    }
}

我們完了！ 這就是我們如何在 React 元件中使用 jQuery 的方式。