在尝试访问脚本时使用 useEffect 对我的 React 项目进行"TypeError: Cannot read property 'classList' of null"？

Question

我正试图在我的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>
*/}

这是我在.中得到错误的script.js文件

const text = document.querySelector("#foo");
setTimeout(() => {
text.classList.toggle("hidden-text");
}, 1000);

本质上，我只是想在React中获取列表元素，并使用脚本设置超时，这样我就可以关闭隐藏的文本类。当然，有一些CSS是单独做这件事的。

希望我能让人们更容易地了解我正在努力做的事情，并在这方面提供任何帮助都将不胜感激。就我得到的特定TypeError而言，是否有其他属性而不是classList可以用来从React中访问列表？

Answer 1

理想情况下，您可以使用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

Answer 2

这不是"反应"；做事情的方式，不应该直接引用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。