如何将 jQuery 合并到 React 应用程序中？答案

【问题标题】：How to incorporate jQuery into react app?如何将 jQuery 合并到 React 应用程序中？
【发布时间】：2017-05-30 05:43:38
【问题描述】：

我有一个反应应用程序，对于响应式菜单，我需要它接受 jQuery，以便我可以使用菜单切换菜单。我是 react 新手，当我将普通 jQuery 添加到 react 中时，它会显示错误。

import React from 'react';
import { Link } from 'react-router';

function Menu() {
  return (
  <div className="head row">
    <div className="container">
      <div className="col-md-12">
        <div className="col-sm-12 col-md-6 top-left">
          <Link to ="/"><img className="img-responsive mainlogo"  src={require('./Header-logo.png')} alt="logo"/></Link>
          <Link className="peaks" to="/">SPORT</Link>
          <div className="mobile-menu hidden-md hidden-lg">
            <div className="icon"><Link className="toggle-menu" to="#"><i className="material-icons">menu</i></Link></div>
            <div className="text">MENU</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  (".toggle-menu").click(function(){
  (".menu").toggle();
  });

  );
}

export default Menu;

【问题讨论】：

我发现 react 和 jQuery 不能很好地协同工作。我建议以反应风格实现您想要的功能。即使用flux/redux。
错误是什么？使用堆栈跟踪更新您的问题。
错误是因为他错过了我猜的$...
使用 jQuery 操作 DOM 不是一个好主意，因为当对象改变其状态时，ReactDom 会重新渲染 DOM 元素。

标签： jquery html css reactjs

【解决方案1】：

我可以看到你使用 ES6，所以我建议因此使用类并扩展 Component 对象。一般来说，当你真的必须使用 JQuery 和 React 时，你可以这样做：

import React, { Component } from 'react';
import { Link } from 'react-router';

class Menu extends Component {
  componentDidMount() {
    //some JQuery code - runs after render function
  }
  render() {
    return <div className="head row">
      <div className="container">
        {/* your HTML that I'm skipping */}
      </div>
    </div>
  }
}

export default Menu;

【讨论】：