如何将此jQuery函数传输到React函数中？

发布于 2025-02-10 11:40:57 字数 926 浏览 0 评论 0原文

我的问题是我不知道如何将jQuery代码实现到React应用程序中，

这是转换中的交替端，

我经常在应用程序中使用此代码来为页面添加一点动作，但是我显然可以't在React中使用jQuery，所以我将如何获得相同的功能到React App

html代码

 ＆lt; div class =“ box-wrapper loading”＆gt;＆lt; div class =“ box”＆gt;＆gt;＆lt;/div＆gt＆gt;
＆lt; div class =“ box-wrapper loading”＆gt;＆lt; div class =“ box”＆gt;＆lt;/div＆gt;＆lt;/div＆gt;

CSS代码

  body {
 Overflow-X：隐藏；
}
.box-wrapper {
 -webkit-transition-turation：600ms；
 过渡：600ms；
}
.box-wrapper.loading：nth-child（奇数）{
 变换：转换（100％）；
}
.box-wrapper.loading：nth-child（偶）{
 变换：转换（-100％）;
}

问题：

javascript代码

在 settimeout（function（）{ element.ClassList.Remove（“ loading”）; }，索引 * 600）; }）;

原文

My problem is I don't know how to implement the Jquery code into a react app

This is an alternating side coming in transform

I regularly use this code in my applications to add a little motion to the page, but I obviously can't use Jquery in react so how would I go about getting the same functionality in to a react app

Html Code

<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

CSS Code

body {
 overflow-x: hidden;
}
.box-wrapper {
 -webkit-transition-duration: 600ms;
 transition-duration: 600ms;
}
.box-wrapper.loading:nth-child(odd) {
 transform: translate(100%);
}
.box-wrapper.loading:nth-child(even) {
 transform: translate(-100%);
}

Issue:

Javascript Code

$(".box-wrapper").each(function (index, element) {
 setTimeout(function () {
   element.classList.remove("loading");
 }, index * 600);
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烙印 2025-02-17 11:40:58

我附上了一个简单的示例，说明如何通过React实现上述功能。

// Your entry component: App

import React, { useEffect, useState } from "react";

const App = () => {
  const boxArray = ["Box1", "Box2"];
  return (
    <>
      {boxArray.map((box, index) => {
        return <WrapperItem box={box} timeout={index * 600} key={index} />;
      })}
    </>
  );
};

const WrapperItem = ({ box, timeout }) => {
  const [loadingClass, setLoadingClass] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoadingClass(false);
    }, timeout);
  }, [timeout]);

  return (
    <div className={`boxWrapper ${loadingClass ? "loading" : ""}`}>
      <div className="box">
        <p>{box}</p>
      </div>
    </div>
  );
};

export default App;

// Place this in index.css

body {
  overflow-x: hidden;
}
.boxWrapper {
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}
.boxWrapper.loading:nth-child(odd) {
  transform: translate(100%);
}
.boxWrapper.loading:nth-child(even) {
  transform: translate(-100%);
}

这可以根据您的要求进一步优化 /重构，但这为您提供了如何使用React与JQuery所做的事情实现的基本概念。

我建议您看看 react trese transition transition Groups package package 当您开始考虑改善初始功能时，对React中的过渡的控制。

I have attached a simplistic example of how you can achieve the above functionality via React.

// Your entry component: App

import React, { useEffect, useState } from "react";

const App = () => {
  const boxArray = ["Box1", "Box2"];
  return (
    <>
      {boxArray.map((box, index) => {
        return <WrapperItem box={box} timeout={index * 600} key={index} />;
      })}
    </>
  );
};

const WrapperItem = ({ box, timeout }) => {
  const [loadingClass, setLoadingClass] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoadingClass(false);
    }, timeout);
  }, [timeout]);

  return (
    <div className={`boxWrapper ${loadingClass ? "loading" : ""}`}>
      <div className="box">
        <p>{box}</p>
      </div>
    </div>
  );
};

export default App;

// Place this in index.css

body {
  overflow-x: hidden;
}
.boxWrapper {
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}
.boxWrapper.loading:nth-child(odd) {
  transform: translate(100%);
}
.boxWrapper.loading:nth-child(even) {
  transform: translate(-100%);
}

This can be further optimized / refactored based upon your requirement, but this gives you a basic idea of how to accomplish with React what you have been doing with jQuery.

I would suggest you to have a look at React Transition Groups package, to have more granular control over transitions in React, when you start thinking of improving your initial functionality.

回复收藏 0 原文

~没有更多了~