【发布时间】：2022-01-27 07:19:18
【问题描述】：
我想避免我的组件内容被 Google 翻译翻译。为此，我尝试使用样式组件的attr 来使用translate="no"，如下所示，但它不起作用：
const MyComp = styled.div.attrs(props => ({
name: props.id,
translate: props.translate,
}))`
padding: 0;
`
<MyComp id="some-id" translate="no"></MyComp>
name 属性工作正常，但 translate 属性不工作。有没有其他方法可以禁用翻译？
【问题讨论】：
-
props.translate总是"yes"还是"no"？可能将undefined作为道具值传递，因此您可能希望默认translate: props.translate || "no"。 -
@Nathan，我尝试设置默认值。同样在调试时，
props.translate是真实的，但它不起作用。 -
如果是这种情况，您需要将真值转换为
"yes"或"no"：translate: props.translate ? "yes" : "no"。此外，一些浏览器不支持translate属性doc。对于谷歌翻译反应，你可能还想在你的组件中包含className="notranslate"。 -
那也行不通。然而，
className="notranslate"成功了。