Question

我正在尝试一种使用React-Helmet来轻松管理SPA的多个页面/部分的Meta的特定方法。并且希望该选项在某些情况下将标签作为字符串传递。

基本思路

我有一个meta.js文件，它是从配置中渲染的：

export default ({ metaConfig }) => {
    return (
        <Helmet>
            <title>{metaConfig.title}</title>
            <meta name="description" content={metaConfig.description} />
            {...Removed a heap of tags for simplicity}
            {metaConfig.custom}
        </Helmet>
    );
};

我添加了自定义数组，以便您可以在逐条路由的基础上将其他脚本/标签插入HEAD。

当您具有HTML元素数组时，这可以很好地工作：

custom: [
  <meta name="custom" content="Custom content" />
]

但是显然不能作为字符串数组使用，我希望能够包含在内。

对此有任何简单的解决方案吗？

Answer 1

我想出了一种简单的方法，但是希望有更好的建议

在metaConfig文件中，我将定义自定义对象，如下所示：

custom: [
  <script>This is a standard html element</script>,
  {
    tag: 'script',
    content: `This is a custom element`
  }
]

通过它们渲染时，只需在meta.js文件中返回或创建一个新元素：

{metaConfig.custom && metaConfig.custom.map(meta => {
    return meta.tag 
      ? React.createElement(meta.tag, meta.props, meta.content)
      : meta;
})}

通过React Helmet字符串化HTML标签

1 个答案: