React， HTML 和 JavaScript： TypeError： 无法设置 null 的属性'innerHTML'

Question

我正在使用React，并得到以下错误：TypeError: Cannot set property 'innerHTML' of null。我确实看到了一些与这个错误有关的问题，但我没有发现任何对我有帮助的问题

//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

在编写React时，应该始终编写JSX，就像您编写的render函数一样。要单独渲染<li>，可以执行以下操作：

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>
)
}