我有一个相对简单的问题，试图将内联脚本添加到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>
这两种方法似乎都不能执行所需的脚本。我猜我错过了一件简单的事。有人能帮忙吗?
PS:忽略foobar，我有一个真正的id实际上在使用，我不想分享。
根据Alex McMillan的解决方案，我有如下的调整。
我自己的环境:React 16.8+，下一个v9+
//添加一个名为Script的自定义组件
/ / / Script.js hook
import { useEffect } from 'react'
// react-helmet don't guarantee the scripts execution order
export default function Script(props) {
// Ruels: alwasy use effect at the top level and from React Functions
useEffect(() => {
const script = document.createElement('script')
// src, async, onload
Object.assign(script, props)
let { parent='body' } = props
let parentNode = document.querySelector(parent)
parentNode.appendChild(script)
return () => {
parentNode.removeChild(script)
}
} )
return null // Return null is necessary for the moment.
}
//使用自定义组件，只需导入它，并将旧的小写<script>标记替换为自定义驼色大小写<script>标记就足够了。
/ / index.js
import Script from "../hooks/Script";
<Fragment>
{/* Google Map */}
<div ref={el => this.el = el} className="gmap"></div>
{/* Old html script */}
{/*<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>*/}
{/* new custom Script component */}
<Script async={false} type="text/javascript" src='http://maps.google.com/maps/api/js' />
</Fragment>
我有原始的html字符串与javascript/Jquery
我安装了NPM库dangerous -set-html-content
NPM I危险地设置html内容
import InnerHTML from 'dangerously-set-html-content'
<div>
<InnerHTML html={html}/>
</div>
or
import InnerHTML from 'dangerously-set-html-content'
const renderhtml=`<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title> is not defined</title>$(document).ready(function(){ $("button").click(function(){ alert("jQuery is working perfectly."); }); });</script></head><body> <button type="button">Test jQuery Code</button></body></html>`
<div>
<InnerHTML html={renderhtml}/>
</div>
确保你添加了jquery cdn到public/index.html文件
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async="true" ></script>
