多语言如何传入标签element
时间: 2023-07-26 17:27:14 浏览: 39
如果你想在多语言应用程序中传递一个包含标签的元素,你可以使用 `dangerouslySetInnerHTML` 属性。
例如,如果你想在多语言应用程序中传递一个包含 `<strong>` 标签的元素,你可以这样做:
```
import { Trans } from 'next-i18next';
function MyComponent() {
return (
<div>
<Trans i18nKey="myComponentText"
components={{ strong: <strong></strong> }}
dangerouslySetInnerHTML={{__html: '<strong>Important text</strong>'}}>
</Trans>
</div>
);
}
```
在这个例子中,`<Trans>` 标签接收一个 `components` 属性,该属性指定了在翻译字符串中使用的 HTML 标签。在翻译字符串中,你可以使用 `{{tagName}}` 来指定要替换的标签。在我们的例子中,我们使用 `components={{ strong: <strong></strong> }}` 将 `<strong>` 标签传递给 `<Trans>` 标签。
然后,我们使用 `dangerouslySetInnerHTML` 属性将包含 `<strong>` 标签的字符串传递给 `<Trans>` 标签,并且使用 `__html` 来告诉 React 这是一个 HTML 字符串。
希望这对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)