时间戳

首页 > 解决方案 > 如何在 JSX 中将返回的字符串重新呈现为 JSX

reactjs - 如何在 JSX 中将返回的字符串重新呈现为 JSX

问题描述

我已经使用 React 构建了一个表单应用程序。我正在使用我认为非常棒的 useState 和 useEffect。为简洁起见，我在下面列出了我正在努力实现的目标。

   import DATA from './data.json'

   const [language, setLanguage] = useState('english');
   const [firstName, setFirstName] = useState('Bob');

   function App() {

       const getTranslation = (reference) => {
           let dictionary = DATA[language]
           return dictionary[reference]
       }

       return (
           <React.Fragment>
               <h1>{getTranslation('HowCanWeHelp')}</h1>
           </React.Fragment>
       );

   }

我正在尝试构建自己的简单语言翻译机制，从 JSON 文件中提取字符串。

从 DATA['english'][HowCanWeHelp] 返回的数据是{firstName}, How can we help you?.

返回什么

{firstName}, How can we help you?

预期什么

Bob, How can we help you?

我不确定这是否可能，但我可以在 JSX 中重新渲染 JSX 吗？我试过用React.Fragment标签包装，dangerouslySetInnerHTML用React.createElement. 一个正确方向的点将不胜感激。

我已阅读以下 stackoverflow 问题，但答案对我来说毫无意义。

返回并渲染 JSX 如何将 JSX 渲染（打印）为字符串？ 在 React.js 中将字符串渲染为 JSX

标签： reactjsjsx

解决方案

大多数国际化库默认都带有此功能。例如。一个流行的 React 国际化库，i18next可以通过以下方式实现它：

i18next.t('HowCanWeHelp', { firstName: "name" });

关于 i18next 插值的文档

如果您不想要一个完整的国际化解决方案而更喜欢自己的字典解决方案，您可以使用像pupa这样的微模板库

import pupa from "pupa";

return (
  <React.Fragment>
     <h1>{
       pupa(getTranslation('HowCanWeHelp'), {
         firstName: "name"
       })
     }</h1>
  </React.Fragment>
);

推荐阅读