如何將 innerHTML 用於 Accordion (PrimeReact)？

Question

在我的 React 項目中，我使用 PrimeReact 庫來顯示一些手風琴。 但我需要動態創建它們，這是當前結果：

如您所見，html 標簽也顯示在常見問題的答案中。 我嘗試使用innerHTML和dangerouslySet...但沒有成功。

這是我的相關代碼：

createAccordions = () => {
    const allFAQs = this.state.allFAQs;
    let accordions = [];

    for (const faq of allFAQs) {
        const accordion = <AccordionTab header={faq.question} dangerouslySetInnerHTML={{__html: `<p>yo man</p>`}}></AccordionTab>;
        accordions.push(accordion);
    }

    return accordions
}

render() {
    return (
        <div className="component">
            <h1 style={{textAlign: 'center'}}>{this.state.pageTitle}</h1>

            <div className="p-grid">
                
                <div className="p-col-3">

                </div>

                <div className="p-col-6">
                    <Accordion>
                        {this.createAccordions()}
                    </Accordion>
                </div>


                <div className="p-col-3">
                    
                </div>
            </div>
        </div>
    )
}

如何正確設置手風琴的 innerhtml？

Answer 1

我看了一下源代碼，發現圖書館試圖渲染你傳遞給它的孩子。 我看到你試過dangerouslySetInnerHTML ，但是將它設置在AccordionTab本身而不是傳遞給它的孩子。

我在 CodePen 上設置了一個快速演示。 我傳入了一個div容器來設置 innerHTML，它似乎可以工作！

<AccordionTab header="Demo">
  <div dangerouslySetInnerHTML={{ __html: "<ul><li>I am HTML</li></ul>" }}></div>
</AccordionTab>