在我目前正在处理的项目中，我们需要支持多种语言，因此我们最终使用 preact-helmet 为每个应用程序视图注入标题和相应的元标记，但我无法使其与{{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定义如何，我都只获得了默认文本。
底线我需要的是将翻译的文本作为字符串获取，但我无法这样做，你能帮忙吗？
如此处所述，这是正确的解决方案：
@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>
);
}
};