Javascript 将模板文字作为道具传递不会进行渲染

我有一个功能部件

const Paragraph = forwardRef((ref: any) => {
  return (
    <div>
      <p dangerouslySetInnerHTML={{ __html: props.text }}></p>
    </div>
  );
});

const段落=forwardRef（（ref:any）=>{
返回(

);
});

调用此组件时，无法呈现此模板文字：

<Paragraph text={`${<a href="#">Terms of Service</a>} and ${<a href="#">Privacy Policy</a>}`} />

结果是：

---

[object object]和[object object]

尝试删除模板字符串中的${}

编辑：我刚刚注意到@super在评论中已经提到了这一点。

---

归功于他；）

ES6模板文本接受它转换为字符串的

${}

中的表达式。您正在为它提供JSX对象

${}

，而这些对象实际上无法转换为字符串表示，它所能做的最好的事情就是

[object object]

您真正想要的是将内部HTML设置为实际字符串

，因此只需删除标记周围的

${}

即可获得预期结果

<Paragraph text={`<a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>`} />

您正在将JSX对象传递给字符串模板。只需删除标记周围的

${}

。你能将其作为注释发布吗？我想接受你的回答