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，则应考虑利用状态变量。

Answer 2

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

类型错误：无法设置 null 的属性“innerHTML”

2 个答案: