如何将 Chosen 合并到我的 React 项目中?

2024-04-29

我想使用 jquery 插件Chosen https://harvesthq.github.io/chosen/在我的项目中。我安装了 jQuery 并通过 npm 选择:

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

Here's a pic of the error: enter image description here


我也在 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 来解决臃肿和冗余的简单问题

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Chosen 合并到我的 React 项目中? 的相关文章

  • 向 ReduxReducer 添加回调

    是否有任何错误 反模式 就 React Redux 中的思考 中添加了一个回调action data转化为行动 reducer ACTION FOR REDUCER var x 123 if action data callback act
  • 将事件添加到 Google Maps API InfoWindow 内的元素

    我想在 Google Maps API v3 InfoWindow 内放置一个带有输入字段和提交按钮的表单 提交后 我想调用一个函数 该函数使用输入字段中输入的地址启动方向服务 这是我的代码 我目前只测试方向事件是否被触发 我已经编写了完整
  • jQuery 选择器定位具有 id AND class 的元素不起作用

    我有以下事件处理函数 jQuery document on click button submitb function e alert jQuery 包含在 html 文档中 但是 如果我点击 div class submitb Go di
  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col
  • 如何避免 TypeScript 中出现虚假的“未使用参数”警告

    我遇到过很多次这种情况 最后决定弄清楚正确的方法是什么 如果我有一个声明方法的抽象父类 然后一些具体子类在其实现中实现真正的逻辑 并且显然使用方法参数 但某些子类不需要在该方法中执行任何操作 因此不要使用方法参数 那些不必执行任何操作的方法
  • 动态更改 vuejs 2 中的选择输入选项

    如何动态更改选择下拉 v model 中的选项 我有 2 个选择输入 其中一个应该根据其他输入进行更改 例如 如果我选择 水果 则选择显示水果 如果我选择 蔬菜 则选择显示蔬菜 我不使用Vuejs 但查看文档后 var TypesArr F
  • 在电子生成器反应电子应用程序后,在 Windows 中出现空白屏幕

    在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 这是package json 在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 name SmallBusinessManagement version 0 1
  • 在移动网站中处理 iPhone 事件(如向左滑动)

    iPhone 浏览器是否有可以使用 Javascript 挂钩的特殊事件 例如 如果用户向左滑动 我想执行某个操作 如果有类似的活动 很高兴看到所有这些活动的参考 理想情况下 有一天所有触摸屏移动浏览器都会有一个标准 您可以访问多点触控事件
  • lessc:未找到命令

    我使用的是 OS X 8 并且是 Node LESS 的新手 我以为我之前安装了 lessc 当我转到 usr local bin 时 我看到了 lessc 但对于我的生活来说 我无法运行它 每当我运行它时 我都会看到 bash lessc
  • 我们如何使用 thymeleaf 绑定对象列表的列表

    我有一个表单 用户可以在其中添加任意数量的内容表对象这也可以包含他想要的列对象 就像在 SQL 中构建表一样 我尝试了下面的代码 但没有任何效果 并且当我尝试绑定两个列表时 表单不再出现 控制器 ModelAttribute page pu
  • 运行故事书时出错 - sh: 1: start-storybook: 未找到

    我运行时遇到错误故事书 即使是干净的安装 npm run storybook gt storybook media programmersedge New Volume devs demostorybook gt start storybo
  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • keystonejs 模型中的动态类型选择

    我想在 adminUI 中使用一个组合框 其中包含来自 Web 服务的字段 我正在考虑使用预 查找 挂钩获取数据 然后覆盖模式中 受众 属性的选项属性 Schema Compliance add title type Types Text
  • 使用 NVM 安装多个版本的 node.js (Ubuntu)

    如何使用 Ubuntu 在 Ubuntu 中安装多个版本的 Node jsNVM https github com creationix nvm 先验知识 如何使用终端 例如 您可以使用gnome terminal 安装依赖项 sudo a
  • 适用于多应用项目的 Grunt 和 requirejs 优化器

    我在让 Grunt 对具有以下结构的项目执行 requirejs 优化时遇到问题 static js apps app js dash js news js many more app files build collections lib
  • Socket.io 与服务器离线连接

    如何检测服务器是否离线或由于其他原因无法连接 我的代码看起来像这样 this socket io connect connectionInfo reconnect false 它不会抛出任何错误 因此 try catch 子句不起作用 Us
  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val
  • JavaScript 正则表达式两个标签之间的多行文本

    我编写了一个正则表达式来从 HTML 中获取字符串 但似乎多行标志不起作用 这是我的模式 我想将文本输入h1 tag var pattern div class box content 5 h1 lt lt h1 gt mi m html
  • JsGrid 将嵌套对象加载到表中

    我正在 Django 中开发一个 Web 项目并使用 jsGrid 我遇到了问题并且找不到解决方案 我有一个嵌套的 JSON 数据 它是通过组合多个数据库表记录创建的 这是我的 JSON count 3 results personnel

随机推荐