在 next.js 中放置 yammer 共享按钮答案

【问题标题】：Place yammer sharebutton in next.js在 next.js 中放置 yammer 共享按钮
【发布时间】：2021-02-03 13:58:41
【问题描述】：

在 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 中如何正确执行此操作？

【问题讨论】：

你能澄清一下你在哪里设置Head 组件吗？其他代码会有所帮助。
好的，我更新了帖子。

标签： reactjs next.js yammer

【解决方案1】：

您不能像在<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> 
    )
};

【讨论】：

我在工作时遇到了一些麻烦。没有任何渲染。
我看到您的设置工作正常，我的应用程序中也有相同的设置。我在 menu.js 中渲染。出现错误：请指定一个 id='yj-share-button' 的元素或传递 developer.yammer.com 中指定的选项
你确定你在渲染<span id="yj-share-button"></span>吗？该错误将表明并非如此。
如果我写 Hello world，Hello world 文本只会被渲染，这让我很困惑。