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>
   );
};

我得到的输出如下所示

​

​

它转到的链接是正确的。但是我想打印moduleUrl变量，而不是像这样打印"Portal URL“

​

​

如何获得第二张图片所示的输出？

Answer 1

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