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

Posted 2023-05-09

【中文标题】类型错误：this.$el.bracket 不是函数

【英文标题】：TypeError: this.$el.bracket is not a function

【发布时间】：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";。正如我上面所说的“我在浏览器上看到以下错误”。提前感谢您的宝贵时间。

【参考方案1】：

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

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