时间戳

首页 > 解决方案 > 传递 React Helmet 字符串化 HTML 标签

javascript - 传递 React Helmet 字符串化 HTML 标签

问题描述

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

基本理念

  1. 我有一个 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" />
]

但显然不能作为字符串数组工作，我希望能够包括在内。

有什么简单的解决方案吗？

标签： javascriptreactjsreact-helmet

解决方案

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

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

推荐阅读