React
Использование ReactJS с jQuery
Поиск…
ReactJS с jQuery
Во-первых, вам нужно импортировать библиотеку jquery. Нам также нужно импортировать findDOmNode, поскольку мы будем манипулировать dom. И, очевидно, мы также импортируем React.
import React from 'react';
import { findDOMNode } from ‘react-dom’;
import $ from ‘jquery’;
Мы устанавливаем функцию стрелки «handleToggle», которая срабатывает при щелчке значка. Мы просто показываем и скрываем div с ссылкой, обозначающей «переключить» onClick над значком.
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, в котором мы будем запускать «handleToggle» onClick.
<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>
);
}
}
Мы сделали! Именно так мы можем использовать jQuery в компоненте React .
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow