将脚本标记添加到React / JSX

作者: 部落用户
发布时间: 2024-08-13 08:52:21 (2天前)
转自：

6 条回复

0#
回复此人
呵呵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用 <a href="https://www.npmjs.com/package/postscribe" rel="nofollow noreferrer"> <code> npm postscribe </code> </A> 在react组件中加载脚本 </p> <pre> <code> postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>') </code> </pre> </DIV>

编辑
1#
回复此人
石茶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我最喜欢的方法是使用React Helmet - 它是一个允许以您可能习惯的方式轻松操作文档头的组件。 </p> <P> 例如 </p> <pre> <code> 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> ); } }; </code> </pre> <P> <a href="https://github.com/nfl/react-helmet" rel="noreferrer"> https://github.com/nfl/react-helmet </A> </p> </DIV>

编辑
2#
回复此人
IP地址 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 答案 <a href="https://stackoverflow.com/users/1136527/alex-mcmillan"> 亚历克斯麦克米兰 </A> 提供的帮助最多，但对于更复杂的脚本标记并不是很有效。 </p> <P> 我略微调整了他的答案，想出了一个带有各种功能的长标签解决方案，另外还设置了“src”。 </p> <P> （对于我的用例，脚本需要生活在头部，这也反映在这里）： </p> <pre> <code> 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); } </code> </pre> </DIV>

编辑
3#
回复此人
氷寒 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我为这个特例创建了一个React组件： <a href="https://github.com/coreyleelarson/react-typekit" rel="noreferrer"> https://github.com/coreyleelarson/react-typekit </A> </p> <P> 只需将你的Typekit Kit ID作为道具传递，你就可以了。 </p> <pre> <code> 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; </code> </pre> </DIV>

编辑
4#
回复此人
AsuRa | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 解决方案取决于方案。就像我的情况一样，我不得不在反应组件中加载一个calendly嵌入。 </p> <P> Calendly寻找div并从中读取 <code> data-url </code> 属性并在所述div中加载iframe。 </p> <P> 首次加载页面时，一切都很好：首先，div <code> data-url </code> 被渲染。然后将calendly脚本添加到正文中。浏览器下载并评估它，我们都快乐回家。 </p> <P> 当您离开然后返回页面时出现问题。这次脚本仍在正文中，浏览器不会重新下载＆amp;重新评估它。 </p> <H2> 固定： </H2> <OL> <LI> 上 <code> componentWillUnmount </code> 找到并删除脚本元素。然后重新安装，重复上述步骤。 </LI> <LI> 输入 <code> $.getScript </code> 。它是一个漂亮的jquery助手，它接受一个脚本URI和一个成功的回调。加载完脚本后，它会对其进行评估并触发您的成功回调。我所要做的只是在我的身上 <code> componentDidMount </code> <code> $.getScript(url) </code> 。我的 <code> render </code> 方法已经有了calendly div。它运作顺畅。 </LI> </醇> </DIV>

编辑

登录后才能参与评论