时间戳

首页 > 解决方案 > React Typescript：带有 JSX 的文本翻译文件

reactjs - React Typescript：带有 JSX 的文本翻译文件

问题描述

我有一个包含所有要翻译的文本的文件...

///translations.txt
const TEXT: { [x: string]: { [y: string]: string } } = { //<== is JSX a string?
  en: {
    joinNow: <React.Fragment>Join <b>Now<b/></React.Fragment>,
    signUp: <React.Fragment>Sign <b>Up<b/></React.Fragment>,
    },
};

然后我导入它..

import { TEXT } from '../../translations';
const txt = TEXT[global.language]; // global.language = en

return (
   {txt.joinNow} // <== I want the word `now` to be inbold
...

标签： reactjstypescript

解决方案

看看危险的setinnerhtml https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

这个道具将允许您从变量呈现 html。

// retrieve your property to render
const joinNow = '<React.Fragment>Join <b>Now</b></React.Fragment>'

return (
  <span dangerouslySetInnerHTML={ __html: joinNow }></span>
)

但是，鉴于这是一个展示细节，您应该考虑将翻译存储为纯文本，并使用组件中的 css 设置样式

推荐阅读