时间戳

首页 > 解决方案 > 类型错误：this.$el.bracket 不是函数

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

问题描述

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

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

我按照本教程学习了如何在 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;

标签： javascriptjqueryreactjsjquery-plugins

解决方案

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

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

推荐阅读