代码之家 › 专栏 › 技术社区 › Axis

如何在ReactJS中添加Altmetrics徽章

cross-reference reactjs

0

Axis · 技术社区 · 6 年前

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

我试图添加altmetric徽章( here )在反应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徽章吗?

3 回复 | 直到 6 年前

1

0

The pyramid 6 年前

我想你所需要做的一切都如前所述 https://api.altmetric.com/embeds.html 您将JS脚本放在HTML中的任何位置,但react是虚拟的DOM,所以您所需要的就是将puplic放在index.html中。 <body> under <div id"root"></div> 或者像你说的那样。就这么简单

2

0

Aamin Khan 6 年前

有两件事你错过了

将脚本添加到 index.html file under 公众的 directory (if you have created your app using 创建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 属性 className 在DOM中

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;

3

0

Axis 5 年前

谢谢你的回答。

为了看到 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 Web应用程序有一个小问题。

在要显示的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>