React中如何获取p标签内容？不使用dangerouslySetInnerHTML方法

要提取该对象中p标签的内容并通过props渲染，且不使用dangerouslySetInnerHTML，可以按以下步骤实现：

1. 解码HTML实体并提取文本 #

首先需要把转义的HTML字符串（比如<p>）转换成可解析的内容，再提取p标签内的纯文本。可以借助浏览器原生的DOMParser来安全完成这个操作：

// 定义提取p标签文本的工具函数
function getPTagContent(htmlStr) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlStr, 'text/html');
  const pElement = doc.querySelector('p');
  // 存在p标签则返回文本，否则返回空字符串
  return pElement ? pElement.textContent.trim() : '';
}

// 你的原始数据
let content = {
  para: `<p>A listing page is the public view of a listing. It should display all relevant information about a listing.</p>`
};

// 提取p标签内的文本
const paragraphText = getPTagContent(content.para);

2. 通过props传递并渲染 #

拿到纯文本后，直接通过props传递给组件渲染即可，因为是纯文本，无需使用危险的HTML渲染方法：

// 父组件
function Parent() {
  const paragraphText = getPTagContent(content.para);
  return <Child text={paragraphText} />;
}

// 子组件
function Child({ text }) {
  // 直接渲染纯文本
  return <div>{text}</div>;
}

原理说明 #

• DOMParser会将转义后的HTML字符串解析成真实的DOM结构，我们可以通过DOM API（querySelector、textContent）安全提取文本内容。
• 最终渲染的是纯文本，不存在XSS风险，也完全符合不使用dangerouslySetInnerHTML的要求。

内容的提问来源于stack exchange，提问作者Arsalan Ali Khattak