Question

我正在网站上的一篇文章（PDF）中尝试使用高度测量。

我试图在React js中添加高度标记（here），但是我无法管理。

这是我的审判：

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

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>

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

Answer 1

我认为您需要做的所有事情https://api.altmetric.com/embeds.html 您将js脚本放在html中的任何位置，但react是虚拟dom，因此您所需的全部内容都放在<body> under <div id"root"></div>中的index.html中的puplic中或喜欢你的名字。就这么简单

Answer 2

您缺少两件事

将脚本添加到index.html file under公共directory (if you have created your app using create-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>

在dom中将class属性更改为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文件。

检查链接： 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徽章

3 个答案: