将模板文字作为 prop 传递不是渲染

Question

我有一个功能组件

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

当我调用这个组件时，我无法呈现这个模板文字：

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

结果是： [object Object] and [object Object]

Answer 1

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

编辑：我刚刚注意到@super 已经在评论中提到了这一点。归功于他 ;)

Answer 2

ES6 模板文字在 ${} 中接受表达式，并将其转换为字符串。你给它的 JSX 对象 ${<a href="#">Terms of Service</a>} 不能真正转换为字符串表示，它能做的最好的是 [object Object].

您真正想要的是将内部 HTML 设置为实际字符串 <a href="#">Terms of Service</a>，因此只需删除标签周围的 ${} 即可获得预期结果。

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

Passing template literal as prop is not rendering