将模板文字作为道具传递不会呈现答案

【问题标题】：Passing template literal as prop is not rendering将模板文字作为道具传递不会呈现
【发布时间】：2020-08-06 23:49:44
【问题描述】：

我有一个功能组件

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]

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：