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

Passing template literal as prop is not rendering

我有一个功能组件

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]

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

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

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>`} />