React-i18next怎么放动态html的内容？

Question

我想看的结果如下

Modules will be public on app.example.com

只有 URL 部分应该是动态的并且可以通过 html 标签点击

我的语言文件：

{
  "moduleWillBePublicOn" : "Modules will be public on <1>Portal URL</1>" 
}

我的代码：

const ShowModuleUrl = ({ moduleUrl }) => {
   return (
      <Trans i18nKey="moduleWillBePublicOn">
         Modules will be public on 
         <a href={moduleUrl}>{moduleUrl}</a>
      </Trans>
   );
};

我得到的输出结果如下

link它去的是正确的。但我想打印 moduleUrl 变量而不是像这样的“Portal URL”

我怎样才能像第二张图片那样得到输出

Answer 1

 <Trans
     i18nKey="moduleWillBePublicOn"
     values={{ moduleUrl: moduleUrl}}
     components={[
        <a href={moduleUrl} target="_blank" rel="noreferrer">
           {moduleUrl}
        </a>,
     ]}>
  </Trans>

React-i18next怎么放动态html的内容？

React-i18next how to put dynamic html content?

i18next

reactjs

react-i18next