无法使用 <Text/> 节点作为 object 上的翻译字符串

Question

在我目前工作的项目中，我们需要支持多种语言，因此我们最终使用 preact-helmet 为每个 App 视图注入标题和相应的元标记，但我无法它与 {{fields}} 占位符一起使用，因此我创建了这个示例项目来演示该问题。

如何安装和运行示例项目

使用 git clone git@github.com:acangiani/preact-i18n-issue.git
安装依赖项：npm install
运行项目npm run start

第一次观看

这个工作正常并且正确地添加了标题和标题元标记。

执行curl http://localhost:3000/，输出如下html：

...
<title>Foo - Bar</title>
<meta name="title" content="Foo - Bar" data-preact-helmet="true">
...

第二个视图

另一方面，在这个视图中我需要使用 {{field}} 占位符，所以这样做 curl http://localhost:3000/test，这会输出以下内容 html:

...
<title>test - Bar</title>
<meta name="title" content="[object Object]" data-preact-helmet="true">
...

我尝试过的东西

在第二个视图上使用 @withText 作为装饰器，但我无法访问道具。
尝试使用 withText 作为功能组件包装器以获取翻译后的文本，但我无法使其工作。
尝试将组件呈现为如下字符串：

render(<Text id="second.title" " fields={{ field: props.slug }}>default text</Text>)

但我只获得了默认文本，而不管 IntlProvider 上加载的 i18n 定义。

最重要的是，我需要的是将翻译后的文本作为字符串获取，但我无法这样做，你能帮忙吗？

Answer 1

如所述here，这是正确的解决方案：

@withText((props) => ({
  title: <Text id="second.title" fields={{ field: props.slug }} />
}))
export default class SecondView extends Component {
  render(props, state) {
    return (
      <div>
        <Helmet
          title={props.title}
          meta={[
            {name: "title", content: props.title },
          ]}
        />
      </div>
    );
  }
};

无法使用 <Text/> 节点作为 object 上的翻译字符串

Can't use <Text/> node as translated string on object

javascript

internationalization

preact

如何安装和运行示例项目

第一次观看

第二个视图

我尝试过的东西