TypeError：无法将属性“innerHTML”设置为 null

Question

我正在尝试使用 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;

第一个是来自我的Testimonial 函数的静态数据，之后我有来自testimonials 函数的动态数据，但是当我想显示输出时，显示如下错误：

TypeError: Cannot set property 'innerHTML' of null

我尝试了很多次，但显示相同的错误。

请给点建议。

Answer 1

如果你想按照你尝试的方式做，我建议使用useRef()。这是一种在 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 标记，但是您可以轻松地为其余的动态组件创建单独的引用。这是一个沙盒：https://codesandbox.io/s/old-monad-ojxn5?file=/src/App.js

请注意，鉴于您使用 React，应考虑利用状态变量。