在 next.js 中放置 yammer 分享按钮

编程问答 2022-05-27

问题描述

在 next.js 中放置 Yammer 共享按钮听起来很简单。从 yammer 读取 documentation 似乎只是在 Head Component 中添加源并使用 <span id="yj-share-button"></span>

调用它 
    export default function YammerButton() {
      return (
          <>
          <Head>
            <script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
            <script type="text/javascript">yam.platform.yammerShare();</script>
         </Head>
          <span id="yj-share-button"></span>
          </>   
     )

};

它不适用于此解决方案，在 next.js 中如何正确执行此操作？

解决方法

您不能像在 <script> 标记中那样直接插入 JavaScript 代码。您可以为此使用 dangerouslySetInnerHTML 道具。

您还需要将脚本移至自定义 _document，以便在首次加载时呈现。

// pages/_document.js

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="UTF-8" />
        </Head>

        <body>
          <Main />
          <NextScript />
          <script
            type="text/javascript"
            src="https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"
          />
          <script
            dangerouslySetInnerHTML={{
              __html: "yam.platform.yammerShare();"
            }}
          />
        </body>
      </Html>
    );
  }
}

然后渲染只需添加 span。

export default function YammerButton() {
    return (
        <span id="yj-share-button"></span> 
    )
};