анимация нескольких текстов с помощью реакции

Question

Я пытаюсь постепенно усиливаться и исчезать с нескольких текстов, используя jquery в реакции, но получаю сообщение об ошибке Line 46:6: 'jquery' is not defined no-undef, хотя я сделал npm i jquery --save. Как мне запустить этот небольшой фрагмент кода jquery с помощью response или есть ли какая-либо библиотека, с помощью которой я могу добиться аналогичного эффекта?

это эффект, который я пытался добавить в проект реакции -> кодовое поле

import React, { useEffect } from "react";
import $ from "jquery";
import "./App.css";
export const App = () => {
  (function ($) {
    $.fn.extend({
      rotaterator: function (options) {
        var defaults = {
          fadeSpeed: 900,
          pauseSpeed: 900,
          child: null,
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
          var o = options;
          var obj = $(this);
          var items = $(obj.children(), obj);
          items.each(function () {
            $(this).hide();
          });
          if (!o.child) {
            var next = $(obj).children(":first");
          } else {
            var next = o.child;
          }
          $(next).fadeIn(o.fadeSpeed, function () {
            $(next)
              .delay(o.pauseSpeed)
              .fadeOut(o.fadeSpeed, function () {
                var next = $(this).next();
                if (next.length == 0) {
                  next = $(obj).children(":first");
                }
                $(obj).rotaterator({
                  child: next,
                  fadeSpeed: o.fadeSpeed,
                  pauseSpeed: o.pauseSpeed,
                });
              });
          });
        });
      },
    });
  })(jquery);

  $(document).ready(function () {
    $("#rotate").rotaterator({ fadeSpeed: 900, pauseSpeed: 200 });
  });
  return (
 <div className="awards">
        <div className="awardHead">Awards</div>
        <img
          src="./images/trophy.jpg"
          width="300px"
          alt=""
          className="awardPhoto"
        />
        <div id="rotate">
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
           <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>

          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
        </div>
      </div>
);
};

Answer 1

Вы импортируете jQuery как $, но затем ссылаетесь на него как jquery в строке 46 вашего кода, несмотря на то, что вы не объявили и не определили переменную с именем jquery Просто передайте $ вместо этого:

import React, { useEffect } from "react";
import $ from "jquery";
import "./App.css";
export const App = () => {
  (function ($) {
    $.fn.extend({
      rotaterator: function (options) {
        var defaults = {
          fadeSpeed: 900,
          pauseSpeed: 900,
          child: null,
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
          var o = options;
          var obj = $(this);
          var items = $(obj.children(), obj);
          items.each(function () {
            $(this).hide();
          });
          if (!o.child) {
            var next = $(obj).children(":first");
          } else {
            var next = o.child;
          }
          $(next).fadeIn(o.fadeSpeed, function () {
            $(next)
              .delay(o.pauseSpeed)
              .fadeOut(o.fadeSpeed, function () {
                var next = $(this).next();
                if (next.length == 0) {
                  next = $(obj).children(":first");
                }
                $(obj).rotaterator({
                  child: next,
                  fadeSpeed: o.fadeSpeed,
                  pauseSpeed: o.pauseSpeed,
                });
              });
          });
        });
      },
    });
  })($); // <== this here was previously an undeclared var of `jquery`

  $(document).ready(function () {
    $("#rotate").rotaterator({ fadeSpeed: 900, pauseSpeed: 200 });
  });
  return (
 <div className="awards">
        <div className="awardHead">Awards</div>
        <img
          src="./images/trophy.jpg"
          width="300px"
          alt=""
          className="awardPhoto"
        />
        <div id="rotate">
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
           <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>

          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
        </div>
      </div>
);
};