Javascript TypeError:无法设置属性'；innerHTML'；空的

我试图用js DOM做一个证明，但我在innerHtml中有一个错误

我有以下代码：：

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuoteLeft, faQuoteRight } from "@fortawesome/free-solid-svg-icons";

const testimonials = [
  {
    name: "Miyah Myles",
    position: "Marketing",
    photo: "https://randomuser.me/api/portraits/women/46.jpg",
    text: `It is a long established fact that a reader will be distracted by
        the readable content of a page when looking at its layout. The point
        of using Lorem Ipsum is that it has a more-or-less normal
        distribution of letters, as opposed to using 'Content here, content
        here', making it look like readable English. Many desktop publishing
        packages and web page editors now use Lorem Ipsum as their default
        model text, and a search`,
  },
  {
    name: "Sheikh",
    position: "Marketing",
    photo: "https://randomuser.me/api/portraits/women/46.jpg",
    text: `It is a long established fact that a reader will be distracted by
        the readable content of a page when looking at its layout. The point
        of using Lorem Ipsum is that it has a more-or-less normal
        distribution of letters, as opposed to using 'Content here, content
        here', making it look like readable English. Many desktop publishing
        packages and web page editors now use Lorem Ipsum as their default
        model text, and a search`,
  },
];

const testimonialContainer = document.querySelector(".testimonials-container");
const testimonial = document.querySelector(".testimonial");
const userImage = document.querySelector(".user-image");
const username = document.querySelector(".username");
const role = document.querySelector(".role");

let idx = 1;
function updateTestimonial() {
  const { name, position, photo, text } = testimonials[idx];

  testimonial.innerHTML = text;
  userImage.src = photo;
  username.innerHTML = name;
  role.innerHTML = position;

  idx++;

  if (idx > testimonials.length - 1) {
    idx = 0;
  }
}
setInterval(updateTestimonial, 10000);

const Testimonial = () => {
  return (
    <div className="container mt-5 custom_testi">
      <div className="row">
        <div className="testimonial-container">
          <div className="progress-bar"></div>
          <span>
            <FontAwesomeIcon
              icon={faQuoteRight}
              className="fa-quote fa-quote-right"
            />
          </span>
          <span>
            <FontAwesomeIcon
              icon={faQuoteLeft}
              className="fa-quote fa-quote-left"
            />
          </span>

          <p className="testimonial">
            It is a long established fact that a reader will be distracted by
            the readable content of a page when looking at its layout. The point
            of using Lorem Ipsum is that it has a more-or-less normal
            distribution of letters, as opposed to using 'Content here, content
            here', making it look like readable English. Many desktop publishing
            packages and web page editors now use Lorem Ipsum as their default
            model text, and a search
          </p>
          <div className="user">
            <img
              src="https://randomuser.me/api/portraits/women/46.jpg"
              alt=""
              className="user-image"
            />
            <div className="user-details">
              <h4 className="username">Miyah Myles</h4>
              <p className="role">Marketing</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Testimonial;

从“React”导入React；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortuawesome/free solid svg icons”导入{faQuoteLeft，faQuoteRight}”；
警察证言=[
{
姓名：“Miyah Myles”，
职位：“营销”，
照片：“https://randomuser.me/api/portraits/women/46.jpg",
经文：`长期以来，读者会因为阅读而分心，这是一个既定的事实
当查看页面布局时，页面的可读内容
使用Lorem Ipsum的好处在于它或多或少具有正常的
信件的分发，而不是在此处使用“内容，内容”
这里，让它看起来像可读的英语。许多桌面出版
软件包和网页编辑器现在使用Lorem Ipsum作为默认设置
模型文本和搜索“，
},
{
姓名：“酋长”，
职位：“营销”，
照片：“https://randomuser.me/api/portraits/women/46.jpg",
经文：`长期以来，读者会因为阅读而分心，这是一个既定的事实
当查看页面布局时，页面的可读内容
使用Lorem Ipsum的好处在于它或多或少具有正常的
信件的分发，而不是在此处使用“内容，内容”
这里，让它看起来像可读的英语。许多桌面出版
软件包和网页编辑器现在使用Lorem Ipsum作为默认设置
模型文本和搜索“，
},
];
const-commentionalcontainer=document.querySelector（“.commentionalcontainer”）；
const-testional=document.querySelector（“.testional”）；
const userImage=document.querySelector（“.user image”）；
const username=document.querySelector（“.username”）；
const role=document.querySelector（“.role”）；
设idx=1；
函数updateStatimonial（）{
const{name，position，photo，text}=推荐信[idx]；
testional.innerHTML=文本；
userImage.src=photo；
username.innerHTML=名称；
role.innerHTML=位置；
idx++；
如果（idx>推荐长度-1）{
idx=0；
}
}
设置间隔（更新时间，10000）；
常数证明=（）=>{
返回(

长期以来，读者会因为阅读而分心，这是一个既定的事实
当查看页面布局时，页面的可读内容
使用Lorem Ipsum的好处在于它或多或少具有正常的
信件的分发，而不是在此处使用“内容，内容”
这里，让它看起来像可读的英语。许多桌面出版
软件包和网页编辑器现在使用Lorem Ipsum作为默认设置
模型文本和搜索

Miyah Myles
营销

);
};
导出默认证明；

第一个是来自我的

证明

函数的静态数据，之后我有来自

证明

函数的动态数据，但当我想显示输出时，向我显示如下错误：

TypeError:无法将属性'innerHTML'设置为null

我试了很多次，但都犯了同样的错误

---

请提供任何建议。

不要在React.js中修改DOM direclty，而是使用props和state。

如果您想以您尝试的方式进行操作，我建议使用。这是一种在JSX中控制html元素的方法。这个想法与你的想法相似，但实际上是可行的：

  const testimonialElem = useRef();
  useEffect(() => {
    let idx = 1;
    function updateTestimonial() {
      const { name, position, photo, text } = testimonials[idx];

      testimonialElem.current.innerHTML = text;
      idx++;

      if (idx > testimonials.length - 1) {
        idx = 0;
      }
    }
    setInterval(updateTestimonial, 3000);
  }, []);

我只引用了一个元素，

p

标记和推荐的主要文本，但是您可以轻松地为其余的动态组件创建单独的引用。这是一个沙箱：

---

请注意，如果使用React，则应考虑利用状态变量。

除非我弄错了，否则

className

不是有效的HTML属性，至少它不常见。试着用

class

替换它，看看你是否能得到更好的结果。这是我的reactJs项目react supported

className

，我认为这不是一个跳过react的问题-我的错。你也可以试着用

id

来代替className，并使用

document.querySelector（#推荐）

获取元素。@Poornaka我也尝试过同样的问题。请用道具重构我的代码！