如何将 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>