Helmet 需要一个字符串作为 <head> 的子项。你忘了给你的孩子戴上牙套吗
Posted
技术标签:
【中文标题】Helmet 需要一个字符串作为 <head> 的子项。你忘了给你的孩子戴上牙套吗【英文标题】：Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces 【发布时间】：2021-11-02 16:13:02 【问题描述】：您好，我知道这可能是一个愚蠢的问题，但是对于我的app.js 文件，这个错误意味着什么？在我运行本地服务器之前它没有出现。之前工作正常。
Error: Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces? ( <head>``</head> ) Refer to our API for more information.
它指向的是我App.js中的这行特定代码：
ReactDOM.render(<App/>,document.getElementById('root'));
它是否指向我创建的页面和不正确的Helmet 元素？我一直在浏览代码，试图弄清楚这一点。感谢您提供任何帮助或见解。
编辑~这是我的主页：
import React from "react";
import Link from "react-router-dom";
import Helmet from 'react-helmet';
import Carousel from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import slide1 from "../images/websliders1.png";
import slide2 from "../images/websliders2.png";
import slide3 from "../images/websliders3.png";
import Layout from "../components/layout";
import "../components/scss/index.scss";
const Home = () =>
return(
<div style= width: `100%`, marginBottom: `0`, height:'auto', overflow:'hidden', zIndex:'1'>
<Layout>
<Helmet>
<head>
<title> Home | BradGradGraphics</title>
<meta property="og:description" content="Freelancing service that offers graphic design, illustration, and some small web design work digitally" />
<meta property="og:url" content="https://bradgrad.graphics" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BradGradGraphics" />
<meta property="og:image" content="../images/SplashPgConc.png" />
</head>
</Helmet>
<Carousel >
<Carousel.Item>
<Link to='/gallery'>
<img className="d-block w-100 img-responsive"
src=slide1
/>
<Carousel.Caption>
<h1 style=color:'black'>My Illustrations</h1>
<p style=color:'black'>Check them out!</p>
</Carousel.Caption>
</Link>
</Carousel.Item>
<Carousel.Item>
<a href='https://blog.bradgrad.graphics/'>
<img className="d-block w-100"
src=slide2
/>
<Carousel.Caption>
<h1 style=color:'black'>Blog</h1>
<p style=color:'black'>Give it a read!</p>
</Carousel.Caption>
</a>
</Carousel.Item>
<Carousel.Item>
/* <Link to='#'> */
<img className="d-block w-100"
src=slide3
/>
<Carousel.Caption>
<h1 style=color:'black'>Comics Incoming!</h1>
<p style=color:'black'>Stay Tuned!</p>
</Carousel.Caption>
/* </Link> */
</Carousel.Item>
</Carousel>
</Layout>
</div>
);
;
export default Home;
【问题讨论】：
能否提供您使用<Helmet/>的文件？
@RyanLe，刚刚添加了更新
@BradG。 , react-helmet 示例：codesandbox.io/s/react-helmet-basic-example-forked-70fi6
我的回答解决了你的问题吗？
@RyanLe，它做到了！谢谢！
【参考方案1】：
您不需要在 <Helmet> 中添加 <head>，因为它已经为您做了
所以去掉<head>标签：
<Helmet>
<title> Home | BradGradGraphics</title>
<meta
property="og:description"
content="Freelancing service that offers graphic design, illustration, and some small web design work digitally"
/>
<meta property="og:url" content="https://bradgrad.graphics" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BradGradGraphics" />
<meta property="og:image" content="../images/SplashPgConc.png" />
</Helmet>;
【讨论】：
以上是关于Helmet 需要一个字符串作为 <head> 的子项。你忘了给你的孩子戴上牙套吗的主要内容，如果未能解决你的问题，请参考以下文章
React SPA - GTM Analytics React-Helmet 上一页标题