将jQuery动画转换为React Hook

Question

我正在构建一个动画，其中两个单词的字母一个接一个地出现，类似于幻灯片效果。我有用jQuery编写的代码，但我需要在我的React应用程序中实现它(用钩子构建(。我的代码接收文本，将其拆分为单个字母，并在这些字母之间添加跨度。这是我需要转换为React:的以下代码

const logoText = document.querySelector('.logo');
const stringText = logoText.textContent;
const splitText = stringText.split("");
for (let i=0; i < splitText.length; i++) {
text.innerHTML += "<span>" + splitText + "</span>" 
}
let char = 0;
let timer = setInterval(onTick, 50)

我想知道你们能不能帮我弄清楚。非常感谢！

Answer 1

您需要对文本进行迭代，并为执行时间不同的每个字母创建一个超时函数，这样就可以看到您期望的幻灯片效果：

自定义挂钩

const useSlideInText = text => {
const [slide, setSlide] = useState([]);
useEffect(() => {
Array.from(text).forEach((char, index) => {
const timeout = setTimeout(
() =>
setSlide(prev => (
<>
{prev}
<span>{char}</span>
</>
)),
index * 100
);
});
}, []);
return slide;
};

用法

function App() {
const slide = useSlideInText("hello");
return (
<div>
{slide}
</div>
);
}

工作示例

Answer 2

我假设要在其中运行此钩子的React组件拥有要拆分的文本。我还假设，在中场休息时，你想透露更多的文本。在这种情况下，我的示例解决方案如下：

挂钩

import {useState, useEffect} from "react";
const useSlideInText = (text) => {
const [revealed, setRevealed] = useState(0);
useEffect(() => {
if (revealed < text.length) {
setTimeout(() => setRevealed(revealed + 1), 50);
}
});

return text.split('').slice(0, revealed).map((char) => (<span>{char}</span>));
}

示例用法

const MyComponent = (props) => {
const displayText = useSlideInText(props.text);
return <div>{displayText}</div>;
};

Answer 3

离开另一个答案：

const generateDisplayTest = (text, numChars) => text.split('').slice(0, numChars).map((char) => (<span>{char}</span>));
const MyComponent = (props) => {
const [revealed, setRevealed] = useState(0);
useEffect(() => {
if (revealed < props.text.length) {
setTimeout(() => setRevealed(revealed + 1), 50);
}
}, [revealed]);
const displayText = generateDisplayTest(props.text, revealed);
return <div>{displayText}</div>;
};

在useEffect中包括CCD_ 4意味着每当CCD_。此外，我一直觉得useState/useEffect应该存在于组件上，在我工作的地方一直是这样，但我不确定这是否是行业标准。