时间戳

首页 > 解决方案 > 无法使用节点作为对象上的翻译字符串

javascript - 无法使用节点作为对象上的翻译字符串

问题描述

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

如何安装和运行示例项目

第一视角

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

这样做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">
...

我尝试过的事情

  1. 在@withText第二个视图中用作装饰器，但我无法访问道具。
  2. 试图withText用作功能组件包装器以获取翻译后的文本，但我无法使其工作。
  3. 试图将组件呈现为一个字符串，如：
render(<Text id="second.title" " fields={{ field: props.slug }}>default text</Text>)

但我只获得了默认文本，而不管IntlProvider.

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

标签： javascriptinternationalizationpreact

解决方案

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

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

推荐阅读