添加jquery插件无法在react应用程序中运行; TypeError：this。$ el.chosen不是函数
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了添加jquery插件无法在react应用程序中运行; TypeError：this。$ el.chosen不是函数相关的知识，希望对你有一定的参考价值。
我正在学习React并跟随integrating other Libraries chapter并尝试了同样的建议，但得到了以下错误
TypeError: this.$el.chosen is not a function
Chosen.componentDidMount
src/App.js:18
componentDidMount() {
this.$el = $(this.el);
> this.$el.chosen();
}
react网站提供example codepen，他们在依赖项中添加了jquery和选择的插件js，我在index.html中添加了jquery和选择的库js文件，并使用npm install jquery --save添加了jquery，以便可以在App.js中导入
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable javascript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
App.js
import React, { Component } from 'react';
import $ from 'jquery';
class Chosen extends Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
}
componentWillUnmount() {
this.$el.chosen('destroy');
}
render() {
return (
<div >
<select className="Chosen-select" ref={el => this.el = el}>
{this.props.children}
</select>
</div>
);
}
}
function Example() {
return (
<Chosen >
<option >vanila</option>
<option >strawberry</option>
<option >chocolate</option>
</Chosen>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<section>
<Example/>
</section>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
为什么我收到此错误以及如何解决此问题？
答案
这似乎是一个与依赖相关的问题。
我注意到你将JQuery及其选择的插件包含在CDN中，这意味着它是全局声明的。但在App.js的第三行你可以在本地引入JQuery的import $ from 'jquery';。根据我的经验，React会将$引用到不带插件的本地JQuery。
我建议您可以尝试评论import $ from 'jquery'并再试一次。
祝好运！
另一答案
通过以下步骤（使用create-react-app创建项目后）使其工作
npm install jquery --save
npm install chosen-js --save
在node_modules / chosen-js / chosen.jquery.js的第1行添加它
import jQuery from 'jquery'
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import $ from 'jquery'
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";
class Chosen extends React.Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
this.handleChange = this.handleChange.bind(this);
this.$el.on('change', this.handleChange);
}
componentDidUnmount() {
this.$el.off('change', this.handleChange);
this.$el.chosen('destroy');
}
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
return (
<div>
<select className="Chosen-select" style={{width: "200px"}} ref={el => this.el = el}>
{this.props.children}
</select>
</div>
);
}
}
function Example() {
return (
<Chosen className="chosen-container chosen-container-single" onChange={value => console.log(value)}>
<option>vanilla</option>
<option>chocolate</option>
<option>strawberry</option>
</Chosen>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
<Example/>
</p>
</div>
);
}
}
export default App;
以上是关于添加jquery插件无法在react应用程序中运行; TypeError：this。$ el.chosen不是函数的主要内容，如果未能解决你的问题，请参考以下文章
在 React 组件和 browserify 包中加载带有插件的 jQuery