ReactJS 如何在字符串中呈现 HTML 对象跨度元素

Question

如何将字符串中包含 span 元素的 HTML 对象转换为 Reactjs 实际可以呈现为 HTML 的对象？

澄清一下，这就是我所拥有的：

 let myObject = "apple tree"

我写了一个函数，将 apple 这个词包装在一个 span 标签（html 对象）中

<span style="color: red;">apple</span>tree

我的网站显示：

 [object Object] tree

但它应该显示

apple tree

其中“苹果”是红色的，因为它被包裹在一个跨度中

我像这样将字符串传递到我的组件中：

 return (<div>{myObject}</div>)

不确定如何将此对象呈现为实际的 HTML 元素，也不确定我是否危险地做 SetInnerHTML 也是最好且唯一的选择

原文由 user3226932 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题已经在这里回答了。 将对象的值插入到 span 标记中

参考 Nitin Dhomse 的回答，你可以这样做：

 let myObject = "apple tree";
<span id="span" style="color: red"></span>
$("#span").text(myObject);

这将为您提供所需的输出。

原文由 Kamran Nazir 发布，翻译遵循 CC BY-SA 4.0 许可协议