如何在 ReactJS 中添加 altmetrics 徽章

Question

我正尝试在我网站上的一篇文章 (PDF) 中使用替代计量。

我试图将 altmetric 徽章 (here) 添加到 in 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 徽章吗？

Answer 1

我认为你需要做的就是描述 https://api.altmetric.com/embeds.html 您将 js 脚本放在 html 中的任何位置，但 React 是虚拟的 dom ，因此您只需要将 index.html 中的 public 放在 <body> under <div id"root"></div> 中或者喜欢你的名字。就这么简单

Answer 2

你缺少两件事

将脚本添加到 index.html file underpublicdirectory (if you have created your app usingcreate-react-app`)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <!-- Here we go with the external script -->
    <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

将 class 属性更改为 dom

className

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        // changed class to className
        <div className='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
      </div>
    );
  }
}

export default App;

Answer 3

谢谢大家的回答。

要首先在您的页面中看到 Altmetrics 结果，您应该添加：

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 页面，但是当您添加到 ReactJS 网络应用程序时，我们遇到了一个小问题。

问题是将外部 javascript 文件添加到要显示 Altmetrics badge

的 ReactJS 页面

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

检查 link： 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>

如何在 ReactJS 中添加 altmetrics 徽章

How can I add altmetrics badge to in ReactJS

reactjs

cross-reference