问题描述
我正在尝试在我的 React 项目中实现 useEffect 以添加我的外部 JS 文件。
这是我当前的 React 代码,注释掉的列表是我试图从脚本访问的内容。
import React,{ useEffect } from 'react';
import { Link } from 'react-router-dom';
import './HeroSec.css';
import '../script.js';
function HeroSec(){
useEffect(() => {
console.log('render');
const script = document.createElement('script');
script.src = "../script.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
})
return(
<div className='hero-container'>
<h1>Example Name </h1>
{/*
<ul id="foo" class="hidden-text">
<li> E </li>
<li class="hidden">x</li>
<li class="hidden">a</li>
<li class="hidden">m</li>
<li class="hidden">p</li>
<li class="hidden">l</li>
<li class="hidden">e</li>
<li class="spaced">N</li>
<li class="hidden">a</li>
<li class="hidden">m</li>
<li class="hidden">e</li>
</ul>
*/}
const text = document.querySelector("#foo");
setTimeout(() => {
text.classList.toggle("hidden-text");
},1000);
本质上,我只是想在 React 中获取该列表元素,并使用脚本设置超时,以便我可以关闭隐藏文本类。当然,有些 CSS 可以单独执行此操作。
希望我能更容易地理解我正在尝试做的事情的大局,并希望对此提供任何帮助。就我得到的特定 TypeError 而言,是否有另一个属性而不是 classList 可以用来从 React 中访问列表?
解决方法
这不是“反应”的做事方式,你不应该直接引用 html 元素并在 React 中修改它们。我不太明白您想要做什么,但您可以尝试以下方法,根据状态以不同方式呈现组件。
function HeroSec(){
const [toggled,setToggled] = useState(false);
...
return ( ....
//Component will have different class based on the value of toggled and
// when toggled value changed react will re-render the element with new value
<ul id="foo" class={toggled ? : "hidden-text" : <another_classname>} >
...)
然后在 setTimeout 函数中使用 setToggled 将 toggled 从 false 更改为 true。
,理想情况下,您使用 useRef
钩子访问带有 React 函数组件的元素。例如:
export default function HeroSec() {
const listElement = useRef(null);
useEffect(() => {
setTimeout(() => {
listElement.current.classList.add("hidden-text");
},1000);
return () => {};
});
return (
<div className="hero-container">
<h1>Example Name </h1>
<ul ref={listElement} id="foo">
<li> E </li>
<li className="hidden">x</li>
<li className="hidden">a</li>
</ul>
</div>
);
}
沙盒:https://codesandbox.io/s/frosty-cache-6rkdq?file=/src/App.js