类型错误：this.$el.bracket 不是函数答案

【问题标题】：TypeError: this.$el.bracket is not a function类型错误：this.$el.bracket 不是函数
【发布时间】：2021-03-24 02:00:51
【问题描述】：

我已经尝试了几个小时能找到的每一个答案......非常感谢任何帮助！

我正在尝试在我的反应组件中使用jQuery Tournament Bracket。我尝试导入像import $ from "jquery"; 这样的jquery，它按预期工作，但是当我执行import "jquery-bracket/dist/jquery.bracket.min.js" 甚至import "jquery-bracket" 时，我在浏览器上看到以下错误。

TypeError: this.$el.bracket is not a function

我关注了this tutorial，了解如何在 React 中实现 jQuery 插件。下面是我所指的组件的代码。

import React from 'react';
import axios from 'axios';

import $ from "jquery";

// Tried //
// import jQueryBracket from "jquery-bracket/dist/jquery.bracket.min.js";
// import "jquery-bracket/dist/jquery.bracket.min.js";
// Currently using //
import "jquery-bracket/dist/jquery.bracket.min.js";


class Bracket extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            teams: "",
            scores: ""
        };
    }

    componentDidMount() {
        let minimalData = {
            teams: [
                ["Team 1", "Team 2"],
                ["Team 3", null],
                ["Team 4", null],
                ["Team 5", null]
            ],
            results: [
                [
                    [[1, 0], [null, null], [null, null], [null, null]],
                    [[null, null], [1, 4]],
                    [[null, null], [null, null]]
                ]
            ]
        }

        let resizeParameters = {
            teamWidth: 100,
            scoreWidth: 30,
            matchMargin: 25,
            roundMargin: 45,
            init: minimalData
        };

        this.$el = $(this.el);
        this.$el.bracket(resizeParameters);
        // $("#bracket").bracket(resizeParameters);
    }

    render() {
        return (
            <>
                <div ref={el => this.el = el}>Bracket goes here...</div>
                {/*<div id="bracket"></div>*/}
            </>

        )
    }
}

export default Bracket;

【问题讨论】：

哪里出错 TypeError: this.$el.bracket is not a function come from？是来自反应页面还是导入“jquery-bracket/dist/jquery.bracket.min.js”文件？从教程看，您似乎还需要将 import $ from "jquery"; 添加到您的 jquery-bracket/dist/jquery.bracket.min.js 文件中。
@PowerGlove 我已经在jquery-bracket/dist/jquery.bracket.min.js 中尝试过import $ from "jquery";。正如我上面所说的“我在浏览器上看到以下错误”。提前感谢您的宝贵时间。

标签： javascript jquery reactjs jquery-plugins

【解决方案1】：

我没有从node_modules 导入jquery.bracket.min.js 给我带来很多麻烦，而是尝试将jquery.bracket.min.js 移动到组件目录。我不知道为什么，但是在我修复了导入问题之后，eslint 抛出了大量错误。为了临时修复eslint 错误，我在jquery.bracket.min.js 顶部添加了以下行

/* eslint-disable no-unused-expressions */

【讨论】：