问javascript中字符串到html的转换

EN

    const page_nav = () => {
            var no=FilterBooks.length/20;
            var p=''
            for(var i=1;i<=no;i++){
               p=p+'<li className="page-item" onClick=book1('+i+')><a className="page-link">'+i+'</a></li>'
            }
            return (p);
    }
    const bookl = (baselimit) => {

        if (FilterBooks.length == 0) {
            return (<p> No Books Found</p>
            )
        } else if(FilterBooks.length<20){
            return( <div id="root"><Bookslist
            filterbooks={FilterBooks}
        /></div>)
        }
        else {
            return (
                <div id='bookdisplay'>
                    <div id="root"><Bookslist
                        filterbooks={FilterBooks.slice(baselimit,baselimit+20)}
                    /></div>
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {
                                page_nav()
                            }
                            {/* {<li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>} */}
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>

                </div>)
        }