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

Question

几个小时以来，我一直在尝试我能找到的每一个答案...非常感谢任何帮助！

我正在尝试在我的 React 组件中使用 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;

Answer 1

我没有从 node_modules 导入 jquery.bracket.min.js 因为这给我带来了很多麻烦，我尝试将 jquery.bracket.min.js 移动到组件目录。我不确定为什么，但在我解决了导入问题之后 eslint 抛出了一大堆错误。为了暂时修复 eslint 错误，我在 jquery.bracket.min.js

的顶部添加了以下行

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

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

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

javascript

jquery

reactjs

jquery-plugins