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

【问题标题】：How to re-render a returned string as JSX, inside JSX如何在 JSX 中将返回的字符串重新呈现为 JSX
【发布时间】：2020-04-17 20:50:05
【问题描述】：

我已经使用 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 问题，但答案对我来说意义不大。

Return and Render JSX How to render (print) JSX as String? Render string as JSX in React.js

【问题讨论】：

非常感谢@Agney 修复代码格式。我努力让它接受我所拥有的。

标签： reactjs jsx

【解决方案1】：

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

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

Docs on i18next interpolation

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

import pupa from "pupa";

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

【讨论】：

【解决方案2】：

使用字符串的replace方法：

const getTranslation = (reference) => {
  let dictionary = DATA[language]
  return dictionary[reference].replace('{firstName}', firstName);
}

这里有一个Working Sample Demo 供您参考。

【讨论】：