如何在ReactJS中添加阿尔特米格卡？
如何在ReactJS中添加阿尔特米格卡？
提问于 2018-12-16 01:47:33
我试图在我的一篇文章(PDF)在我的网站上使用高精度指标。
我试图在react 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"> </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中正确地放置高精度的标记吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-12 05:28:35
谢谢大家的回答。
要在页面中首先看到Altmetrics结果，您应该添加：
- file度量外部javascript文件
<script type='text/javascript'src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script> - 您应该将DOI添加到任何想要显示的位置。
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>因此，这是为了添加到html页面，但当您添加ReactJS网络应用程序，我们有一个小问题。
问题是在ReactJS页面中添加要显示Altmetrics badge的外部javascript文件
因此，解决方案是，我们需要安装一个加法库，允许我们实现任何外部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>
);
}
}然后，您可以在页面中的任何地方添加want指标徽章，如下所示
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="doi-numberhere" class="altmetric-embed"></div>Stack Overflow用户
发布于 2018-12-16 01:58:54
我认为您所需要做的就是按照描述的https://api.altmetric.com/embeds.html，将js脚本放在html中的任何位置，但反应是虚拟的，所以您所需要的只是在<body> under <div id"root"></div>中的index.html中放入puplic，或者像您命名的那样。就这么简单
Stack Overflow用户
发布于 2018-12-16 06:46:42
有两件事你错过了
- 将脚本添加到
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>
- 在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;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53798787
复制相关文章
相似问题
腾讯云开发者
