मैं एक एचटीएमएल के रूप में पी प्रिंट करना चाहता हूं लेकिन इसकी छपाई के रूप में यह मेरे वेबपेज में एक स्ट्रिंग के रूप में है, मुझे अपने वेबपेज में एचटीएमएल ऑब्जेक्ट के रूप में प्रिंट करने के लिए क्या करना चाहिए कोड नीचे दिया गया है

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

कृपया कोई इसमें मदद कर सकता है ??

0
Laxman Gupta 26 सितंबर 2020, 12:30

2 जवाब

सबसे बढ़िया उत्तर

आपको स्ट्रिंग को HTML में बदलने की आवश्यकता नहीं है, बस 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>
  ))}
</>
2
Dennis Vash 26 सितंबर 2020, 12:43

आप आंतरिक HTML सेट कर सकते हैं लेकिन मैं अनुशंसा नहीं करूंगा क्योंकि अनजाने में अपने उपयोगकर्ताओं को क्रॉस-साइट स्क्रिप्टिंग (XSS) हमले के लिए उजागर करना आसान है:

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

आप html-react-parser भी आजमा सकते हैं।

मैं इसे JSX के साथ उचित तरीके से करूँगा।

-1
Dean James 26 सितंबर 2020, 12:38