Javascript 如何在React功能组件中生成HTML？

我试图在react组件内部生成HTML，但我不知道如何正确执行。这是我的密码：

import React from 'react'

const Pagination = (props) => {
  let items = []
  for (let i = 0; i <= props.pages; i++) {
    items.push(`<li class="page-item" value=${i} onClick={props.handleClick}><a class="page-link" href="/#">${i}</a></li>`)
  }
  return (
    <nav aria-label="Page navigation example" className='mb-5' style={{ overflowX: 'scroll' }} >
      <ul class="pagination ">
        <li class="page-item">
          <a class="page-link" href="/#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>

        {items}

        <li class="page-item">
          <a class="page-link" href="/#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  )
}

export default Pagination

从“React”导入React
常量分页=（道具）=>{
让项目=[]
对于（让i=0；i删除backticks`和$，否则这将不会被解释为JSX

另外，在使用JSX时，使用属性
className
而不是
class
，以避免与JS保留字类混淆

import React from 'react'

const Pagination = (props) => {
  let items = []
  for (let i = 0; i <= props.pages; i++) {
    items.push(<li className="page-item" value={i} onClick={props.handleClick}><a className="page-link" href="/#">{i}</a></li>);
  }
  return (
    <nav aria-label="Page navigation example" className='mb-5' style={{ overflowX: 'scroll' }} >
      <ul className="pagination ">
        <li className="page-item">
          <a className="page-link" href="/#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>

        {items}

        <li className="page-item">
          <a className="page-link" href="/#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  )
}

export default Pagination

从“React”导入React
常量分页=（道具）=>{
让项目=[]
for（让i=0；我删除
`
和
$
字符：
项。push（
）
@Chris G是的，它修复了它，感谢lot请记住，您在函数中使用的是JSX而不是html。将被呈现为html，但这是不同的，并且是在函数获取compiled@Chris如果你能把你的答案贴出来，我会接受的，因为你先回答了。谢谢