NextJS 字符串头

Question

NextJS 字符串头

我正在尝试将下一个 HEAD 组件设置为字符串值（实际上是从 woocommerce 作为 Yoast Head 字符串返回的）

问题是 html 字符串的内容永远不会添加到 HEAD 组件中！

上面还有其他 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>
    </>
  );
};

Run Code Online (Sandbox Code Playgroud)

更新我已经解决了这个问题，html-react-parser但如果有人有更好的方法，我会将其保留为开放状态！

Answer 1

Meh*_*dız 6

我试图做同样的事情，我能够使用“ html-react-parser ”将 YOAS Head 块转换为可解析的反应元素数组

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>
)

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，10 月前
查看次数：	2096 次
最近记录：	5 年，5 月前