Как я могу добавить значок altmetrics в ReactJS - PullRequest
Новая
       47

Как я могу добавить значок altmetrics в ReactJS

0 голосов
/ 16 декабря 2018

Я пытаюсь использовать альтметрию в одной из моих статей (PDF) на моем веб-сайте.

Я пытался добавить альтметрические значки ( здесь ), чтобы реагировать на 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>

Может кто-нибудь знать, как правильно разместить значки альтметрии в программе ReactionJS?

Ответы [ 3 ]

0 голосов
/ 16 декабря 2018

Вам не хватает двух вещей

  1. Добавление сценария в index.html file under public directory (if you have created your app using create-Reaction-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 в дом 

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;
0 голосов
/ 12 января 2019

Спасибо за все ответы.

Для просмотра результата 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-страницу, но когда вы добавляете в ReactJS веб-приложение, у нас возникает маленькая проблема.

Проблемадобавляет на страницу 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>
0 голосов
/ 16 декабря 2018

Я думаю, все, что вам нужно сделать, как описано https://api.altmetric.com/embeds.html, что вы помещаете js-скрипт в любое место в html, но реагируете на это виртуально dom, поэтому все, что вам нужно, это поместить в puplic в index.html в <body> under <div id"root"></div> или как вы назвали.просто так

...