javascript - 使用 React 为多个文本添加动画效果

Question

我尝试在 React 中使用 jquery 淡入和淡出多个文本，但收到错误 Line 46:6: 'jquery' is not Defined no-undef 即使我做了npm i jquery --save。如何使用 React 运行这一小段 jquery 代码，或者是否有任何库可以实现类似的效果？

这是我试图添加到react项目中的效果 -> codepen

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 作为 $ 导入，然后在代码的第 46 行将其引用为 jquery，尽管您既没有声明也没有定义名为 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>
);
};