向React/JSX添加脚本标记
向React/JSX添加脚本标记
提问于 2015-12-23 05:38:29
我有一个相对简单的问题，就是尝试向React组件添加内联脚本。到目前为止，我所拥有的：
'use strict';
import '../../styles/pages/people.scss';
import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';
import { prefix } from '../../core/util';
export default class extends Component {
render() {
return (
<DocumentTitle title="People">
<article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
<h1 className="tk-brandon-grotesque">People</h1>
<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
</article>
</DocumentTitle>
);
}
};我也尝试过：
<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>这两种方法似乎都不能执行所需的脚本。我想这是我错过的一件简单的事情。有人能帮上忙吗？
注:忽略foobar，我有一个真实的id在使用中，我不想分享它。
回答 17
Stack Overflow用户
发布于 2017-12-10 05:35:42
我最喜欢的方式是使用React Helmet -它是一个组件，允许以您可能已经习惯的方式轻松地操作文档头。
例如：
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</Helmet>
...
</div>
);
}
};Stack Overflow用户
发布于 2017-02-08 20:10:23
根据上面的答案，你可以这样做：
import React from 'react';
export default class Test extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.innerHTML = "document.write('This is output by document.write()!')";
this.instance.appendChild(s);
}
render() {
return <div ref={el => (this.instance = el)} />;
}
}div被绑定到this，脚本被注入其中。
演示可在codesandbox.io上找到
Stack Overflow用户
发布于 2018-01-22 03:53:46
如果您需要在SSR (服务器端呈现)中使用<script>块，则使用componentDidMount的方法将不起作用。
您可以改用react-safe库。React中的代码为：
import Safe from "react-safe"
// in render
<Safe.script src="https://use.typekit.net/foobar.js"></Safe.script>
<Safe.script>{
`try{Typekit.load({ async: true });}catch(e){}`
}
</Safe.script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34424845
复制相关文章
相似问题
腾讯云开发者
