时间戳

首页 > 解决方案 > 如何在 ReactJS 中添加 altmetrics 徽章

reactjs - 如何在 ReactJS 中添加 altmetrics 徽章

问题描述

我正在尝试在我网站的一篇文章 (PDF) 中使用 altmetrics。

我尝试将 altmetric 徽章（此处）添加到 reacts js 中，但我无法管理。

这是我的试验：

首先我尝试创建一个组件并添加到页面

class DownloadPDF extends Component {

  render() {

    return (
      <div>
        <script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
        <div data-badge-details="right" data-badge-type="medium-donut" data-doi={"my-doi-number-here"} class="altmetric-embed">&#160;</div>
        <a href = "my-crosreff-doi.pdf" target = "_blank">Download PDF </a>
      </div>
    );
  }
}

第二种是我尝试直接放入页面：

      <div>
                  <script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
                  <div data-badge-details="right" data-badge-type="medium-donut" data-doi="my-doi-number-here" class="altmetric-embed"> my-crosreff-doi.pdf</div>
                  {<DownloadPDF />}


</div>

有人可以知道如何在 reactJS 中正确放置 altmetrics 徽章吗？

标签： reactjscross-reference

解决方案

谢谢大家的回答。

为了Altmetrics首先在您的页面中查看结果，您应该添加：

  1. altmetrics 外部 javascript 文件

    <script type='text/javascript'src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>

2. 你应该在任何你想显示的地方添加你的 DOI

<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>

所以这是为了添加到 html 页面，但是当你添加到ReactJSweb 应用程序时，我们有一个小问题。

问题是在要显示的 ReactJS 页面中添加外部 javascript 文件Altmetrics badge

所以解决方案是我们需要安装一个附加库，允许我们实现任何外部 javascript 文件。

检查链接： https ://github.com/shaneosullivan/ReactDependentScript/

我们需要在您的 ReactJS 页面中添加以下代码

...
render() {

    return (

<div>
<ReactDependentScript
  loadingComponent={<div></div>}
  scripts={['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']}
>
  <div></div>
</ReactDependentScript>

...

</div>

    );
  }

}

然后您可以像这样在页面中的任何位置添加您的 Altmetrics 徽章

<div data-badge-details="right" data-badge-type="medium-donut" data-doi="doi-numberhere" class="altmetric-embed"></div>

推荐阅读