React中如何将对象内容正确插入字符串中？

问题根因 #

• 直接将获取到的DOM节点对象放在JSX的{}中渲染，React无法解析原生DOM对象，就会输出[Object Object]
• 若直接渲染未处理的HTML字符串，React默认会转义所有HTML标签，导致图片、段落、换行都无法正常展示

解决方案 #

方案1：完整保留HTML结构（含图片、换行） #

如果需要完整渲染外部内容的所有标签效果，使用React提供的dangerouslySetInnerHTML属性：

function DynamicPage() {
  // 替换为你实际从其他页面获取到的HTML字符串
  const externalContent = `
    <p><img src="https://i.sstatic.net/CbYCt.png" alt="" /></p>
    <p><img src="https://i.sstatic.net/bKbdT.png" alt="" /></p>
  `
  return <div dangerouslySetInnerHTML={{ __html: externalContent }} />
}

注意：仅在你完全确认外部HTML来源安全时使用该方案，避免XSS注入风险。

方案2：仅保留文本和换行 #

如果不需要渲染图片等元素，只需要文本内容和换行效果，可以提取DOM的文本内容后配合CSS处理：

// 假设你拿到的是其他页面的DOM节点对象
const externalDom = document.querySelector('#target-node')
const textContent = externalDom.innerText

// 渲染时设置whiteSpace保留换行
function DynamicPage() {
  return <p style={{ whiteSpace: 'pre-line' }}>{textContent}</p>
}

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