我有一个相对简单的问题,试图添加内联脚本 应对 </跨度> 零件。到目前为止我所拥有的:
‘使用严格’;
import’../../styles/pages/people.scss’;
进口 应对 </跨度> ‘,{Component} from’ 应对 </跨度> “;从’导入DocumentTitle’ 应对 </跨度> -文件名’;
从’../../core/util’导入{prefix};
export default class extends Component { render(){ 回归
您可以使用 npm postscribe 在react组件中加载脚本
npm postscribe
postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>')
我最喜欢的方法是使用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> ); } };
https://github.com/nfl/react-helmet
答案 亚历克斯麦克米兰 提供的帮助最多,但对于更复杂的脚本标记并不是很有效。
我略微调整了他的答案,想出了一个带有各种功能的长标签解决方案,另外还设置了“src”。
(对于我的用例,脚本需要生活在头部,这也反映在这里):
componentWillMount () { const script = document.createElement("script"); const scriptText = document.createTextNode("complex script with functions i.e. everything that would go inside the script tags"); script.appendChild(scriptText); document.head.appendChild(script); }
我为这个特例创建了一个React组件: https://github.com/coreyleelarson/react-typekit
只需将你的Typekit Kit ID作为道具传递,你就可以了。
import React from 'react'; import Typekit from 'react-typekit'; const HtmlLayout = () => ( <html> <body> <h1>My Example React Component</h1> <Typekit kitId="abc123" /> </body> </html> ); export default HtmlLayout;
解决方案取决于方案。就像我的情况一样,我不得不在反应组件中加载一个calendly嵌入。
Calendly寻找div并从中读取 data-url 属性并在所述div中加载iframe。
data-url
首次加载页面时,一切都很好:首先,div data-url 被渲染。然后将calendly脚本添加到正文中。浏览器下载并评估它,我们都快乐回家。
当您离开然后返回页面时出现问题。这次脚本仍在正文中,浏览器不会重新下载&amp;重新评估它。
componentWillUnmount
$.getScript
componentDidMount
$.getScript(url)
render