如何将 Chosen 合并到我的 React 项目中？答案

【问题标题】：How can I incorporate Chosen into my React project?如何将 Chosen 合并到我的 React 项目中？
【发布时间】：2017-08-13 19:55:40
【问题描述】：

我想在我的项目中使用 jquery 插件Chosen。我通过 npm 安装了 jQuery 和 Chosen：

npm i jquery chosen-js -S

这两个库现在都在我的 node_modules 文件夹中。不幸的是，当应用程序尝试编译时，我不断收到错误消息：ReferenceError: jQuery is not defined。

这里是我调用 Chosen 库的地方：

import React from "react";
import ReactDom from "react-dom";
import $ from "jquery";
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";

class App extends React.Component {
  componentDidMount() {
    $(this.refs.list).chosen();
  }

  render() {
    return (
      <select ref="list">
        <option>vanilla</option>
        <option>chocolate</option>
        <option>strawberry</option>
      </select>
    );
  }
}

ReactDom.render(, document.getElementById("app"));

这是错误的图片：

【问题讨论】：

看看react-chosen包装器

标签： javascript node.js reactjs jquery-chosen

【解决方案1】：

我也回答了你关于 Udemy 的问题。如果你真的想认真对待你的 react 事业，你最终需要放弃使用 jQuery。

我使用 react-select 制作了非常复杂的选择组件，甚至使用来自 API 的数据。我建议使用 React Select 来满足您的所有选择需求，它是一个强大的组件，将改变您的生活。

如果您仍然觉得必须使用 selected.js，则编辑 'chosen-js/chosen.jquery.js' 并添加 import 语句或 require 之类的语句

import jQuery from 'jquery' // or
const jQuery = require('jquery');

以便参考错误消失。然而，如果你考虑一个严肃的前端职业，你需要明白 jQuery 已经死了，严肃的应用程序不会同时使用 react 和 jquery 来解决臃肿和冗余的简单问题

【讨论】：

【解决方案2】：

不要更改源，最好写在你的组件中

window.jQuery = require('jquery');

在 selected-js 导入之前

【讨论】：