如何在PrimeReact Accordion中正确使用innerHTML渲染内容？

我帮你看了下你的代码，问题出在dangerouslySetInnerHTML的放置位置上——你把它直接作为AccordionTab的属性了，但PrimeReact的AccordionTab组件是把子元素作为面板的内容区域来渲染的，所以得把HTML内容放在它的内部容器里，而不是组件属性中。

修改后的代码示例 #

createAccordions = () => {
  const allFAQs = this.state.allFAQs;
  let accordions = [];
  
  for (const faq of allFAQs) {
    // 把dangerouslySetInnerHTML放在AccordionTab的子元素里
    const accordion = (
      <AccordionTab header={faq.question}>
        <div dangerouslySetInnerHTML={{ __html: faq.answer }} />
      </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>
  )
}

关键说明 #

• 核心是给AccordionTab添加一个子容器（比如<div>），然后把dangerouslySetInnerHTML应用在这个容器上，这样PrimeReact才会正确渲染解析后的HTML内容。
• 如果你的faq.answer本身就是包含HTML标签的字符串（比如<p>这是FAQ的答案</p>），直接替换示例中的faq.answer即可，不需要手动写HTML字符串。
• 别忘了dangerouslySetInnerHTML的命名由来——如果你的HTML内容来自用户输入或不可信来源，一定要先做XSS过滤，避免安全风险。

内容的提问来源于stack exchange，提问作者IonicMan