反应，HTML 和 JavaScript：TypeError：无法设置 null 的属性“innerHTML”

Question

I am using React and I am getting the following error: TypeError: Cannot set property 'innerHTML' of null . I did see some questions related to this error but I did not find any that helped me.

//React
class Pagination extends Component {

  pagincationScript = (totalPages, page) =>{
    const ulTag = document.querySelector("ul");

    let liTag = '';
    if(page > 1){
      liTag = `<li className="Btn Previous"><span><i>&#8592;</i>Previous</span></li>`
    }

ulTag.innerHTML = liTag;

  }

  render() {

    return (
      <div className="Pagination">
        <ul>

        {this.pagincationScript(10, 5)}

        </ul>
      </div>
    )
  }
}

export default Pagination;

Answer 1

When writing React you should always be writing JSX, like in the render function you wrote. To render the <li> separately you can do something like the following:

function Li() {
  return (
    <li className="Btn Previous"><span><i>&#8592;</i>Previous</span></li>
  )
}

export default function Pagination() {
  // Loop as many times as needed
  const lis = [];
  for (let i = 0; i < 10; i++) {
    lis.push(<Li key={i} />);
  }

  return (
    <div className="Pagination">
      <ul>
        {lis}
      </ul>
    </div>
  )
}