React dangerouslySetInnerHTML 正在为图像道具渲染 [object object]答案

【问题标题】：React dangerouslySetInnerHTML is rendering [object object] for image propReact dangerouslySetInnerHTML 正在为图像道具渲染 [object object]
【发布时间】：2021-07-21 20:43:27
【问题描述】：

     content={
        <span>
          <img className="rounded-circle img_center" 
           src={icon} alt="" />
         </span>
      }

如果内容是道具并且具有以上图像内容。

<span dangerouslySetInnerHTML={{ __html: content }} />;

这被渲染为[object object]，如何处理。还有一种方法可以使用片段而不是 span 标签来呈现 dangerouslySetInnerHTML

【问题讨论】：

标签： reactjs image-processing rendering dangerouslysetinnerhtml

【解决方案1】：

在这种情况下，您不需要使用 dangerouslySetInnerHTML 而是使用这个库 jsxt-to-string

【讨论】：

TypeError: Converting circular structure to JSON --> starting at object with constructor 'FiberNode' | property 'stateNode' -> object with constructor 'Home' --- property '_reactInternalFiber' closes the circle

【解决方案2】：

您不是在传递 HTML，而是在传递一个对象（在这种情况下显然是 JSX）。当一个对象直接呈现为 HTML 时，它会以 [object object] 的形式出现。将是 className 导致它被读取为对象，而不仅仅是不正确的 HTML。

使用 div 而不是 span。

【讨论】：

我尝试直接传递类名，仍然只是它的对象。我使用的是 div，但 card.text 导致 div 不能进入 p 标签内的问题
是标签不是 html 吗？
@MithunShreevatsa 是，但 src={avatar} 不是，className={['avatar', 'rounded-circle'].join(' ')} 也不是。这些是 JSX 表单
content={ <span> <img className="rounded-circle img_center" src={icon} alt="" /> </span> } 即使这样也行不通，尽量简化