问NextJS字串头
EN

Stack Overflow用户

提问于 2020-08-03 14:20:19

回答 1查看 1.3K关注 0票数 3

我正在尝试将下一个HEAD组件设置为string值(它实际上从woocommerce返回为Yoast字符串)。

麻烦的是html字符串的内容从未添加到HEAD组件中！

上面还有其他的头部部件，但据我所知，它是添加剂吗？

 const Product = ({ product }) => {

  const classes = useStyles();
  const addToCart = useContext(BasketContext);

  return (
    <>
      <Head dangerouslySetInnerHTML={{ __html: product.yoast_head }} />
      <div className={classes.root}>

        <Grid container spacing={1}>
          <Grid item className={classes.grid} xs={6}>
            <Card addToCart={addToCart} product={product} />
          </Grid>
        </Grid>
        <TabPanel product={product} />
      </div>
    </>
  );
};

更新，我已经修复了这个与html-react-parser，但我将保留这个开放的机会，谁有一个更好的方式！

reactjs

next.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-26 05:42:10

我试图做同样的事情，并且我能够将YOAS头块转换为一个被解析的元素数组，使用"html-react解析器“来响应元素数组。

import parse from 'html-react-parser'
...
const yoastHead = parse(bookDetail.yoast_head)
return (
    <Layout>
        <Head>
            {yoastHead}
        </Head>
        <h1 dangerouslySetInnerHTML={{ __html: bookDetail.title.rendered }} />
        <div dangerouslySetInnerHTML={{ __html: bookDetail.content.rendered }} />
    </Layout>
)

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63231191

复制

相似问题

问NextJS字串头
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NextJS字串头EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NextJS字串头
EN