React
Utiliser ReactJS avec jQuery

ReactJS avec jQuery

Tout d'abord, vous devez importer la bibliothèque jquery. Nous devons également importer findDOmNode car nous allons manipuler le dom. Et évidemment, nous importons également React.

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

Nous configurons une fonction de flèche «handleToggle» qui se déclenchera quand une icône sera cliquée. Nous montrons et masquons simplement un div avec un nom de référence "basculer" surCliquez sur une icône.

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

Définissons maintenant le nom de référence 'toggle'

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

L'élément div où nous allons lancer le "handleToggle" sur onClick.

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

Laissez le code complet ci-dessous, à quoi il ressemble.

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

Nous avons fini! Voici comment nous pouvons utiliser jQuery dans le composant React .