Question

我正在学习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();
  }

反应网站提供example codepen，他们在依赖项中添加了jquery和选择的插件js，我在 index.html 中添加了jquery和选择的库js文件，并使用{添加了jquery {1}}以便可以在 App.js

中导入

的index.html

npm install jquery --save

App.js

<!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>

index.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;

为什么我收到此错误以及如何解决此问题？

Answer 1

阅读文档时，我也面临着同样的问题。但是，我没有更新“ node_modules / chosen-js / chosen.jquery.js ”文件，而是更喜欢使用ProvidePlugin在webpack.config.js中注入隐式全局变量

但是，当我们使用create-react-app创建应用程序时，没有找到webpack.config.js文件。您将需要弹出react应用程序。但是，在退出应用程序之前，您应该首先阅读以下链接（如果您是高级用户，并且对默认配置不满意）。

链接：- https://github.com/satendra02/react-chrome-extension/wiki/What-happens-when-you-eject-Create-React-App https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741

您将需要运行以下命令来弹出react应用程序，因为该命令将从项目中删除单个构建依赖项，还将所有配置文件和传递性依赖项（webpack，Babel，ESLint等）复制到您的项目作为package.json中的依赖项

npm运行弹出

安装依赖项

npm install jquery selected-js --save

现在编辑您的webpack.config.js文件并按如下所示更新配置对象

return {
    ...
    module: {
        ...
    },
    plugins: [
        ...
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ]
    ...
}

Chosen.js

import React from 'react';
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);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.children !== this.props.children) {
      this.$el.trigger("chosen:updated");
    }
  }

  componentWillUnmount() {
    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" ref={(el) => (this.el = el)}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

Answer 2

这似乎是与依赖相关的问题。

我注意到你将JQuery及其选择的插件包含在CDN中，这意味着它是全局声明的。但是在App.js的第三行中你import $ from 'jquery';可能会在本地引入JQuery。根据我的经验，React会将$引用到不带插件的本地JQuery。

我建议您尝试发表评论import $ from 'jquery'然后重试。

祝你好运！

Answer 3

通过以下步骤（使用create-react-app创建项目后）使其工作

npm install jquery --save
npm install chosen-js --save

在node_modules / chosen-js / chosen.jquery.js的第1行添加此内容

import jQuery from 'jquery'

As per this answer

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不是函数

的index.html

App.js

index.js

3 个答案: