将模板文字作为 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>`} />
我有一个功能组件
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>`} />