javascript中字符串到html的转换

Question

I want to print p as a html but its printing as it is in my webpage as a string what should I do for printing as a html object in my webpage The code is given below

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

Please can someone help with this??

Answer 1

You don't need to convert string to HTML, just render the JSX:

// Same logic as page_nav()
<>
  {[...Array(FilterBooks.length / 20).keys()].map((key) => (
    <li className="page-item" key={key} onClick={() => bookl(key+1)}>
      <a className="page-link">{key+1}</a>
    </li>
  ))}
</>

Answer 2

You can set innerHTML but I would not recommend as it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack:

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

You could also try html-react-parser .

I'd just do it the proper way with JSX.