我有一个相对简单的问题,试图将内联脚本添加到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 (
            
                

                    
People

                    
                    
                
            
        );
    }
};

我也尝试过:

这两种方法似乎都没有执行所需的脚本.我猜这是一件我想念的简单事.有人可以帮忙吗？

PS:忽略foobar,我有一个真正的ID实际上在使用,我不想分享.

1> Alex McMilla..：

---

是否要在每次渲染此组件时一次又一次地获取和执行脚本,或者只是在将此组件装入DOM时只执行一次？

也许尝试这样的事情:

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

但是,如果要加载的脚本不可用作模块/包,这只是非常有用.首先,我会永远:

在npm上查找包

在我的项目中下载并安装包(npm install typekit)

import我需要的包裹(import Typekit from 'typekit';)

这可能是您安装软件包的方式react,也可能是您react-document-title的示例,并且npm上有一个Typekit软件包.

---

这确实有效 - 加载脚本,但我怎样才能访问脚本中的代码.例如,我想调用一个存在于脚本中的函数,但是我无法在加载脚本的组件内调用它.

2> sidonaldson..：

---

继上面的答案,你可以这样做:

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 
 (this.instance = el)} />;
  }
}

div被绑定this并且脚本被注入其中.

可以在codesandbox.io上找到演示

---

this.instance对我不起作用,但是document.body.appendChild从Alex McMillan的回答中做到了.

---

您可能没有将`this.instance`绑定到render方法中的ref.我添加了一个演示链接来显示它的工作情况

3> Patrice Wrex..：

---

我最喜欢的方法是使用React Helmet - 它是一个允许以您可能习惯的方式轻松操作文档头的组件.

例如

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        

            
                
                
            
            ...
        
    );
  }
};

https://github.com/nfl/react-helmet

---

这是迄今为止最好的解决方案.

---

不幸的是,它无法正常工作...请参阅https://codesandbox.io/s/l9qmrwxqzq

---

试过这个，对我不起作用。我不建议使用react-helmet，其唯一原因是它将无法删除的额外属性注入脚本。这实际上破坏了某些脚本，并且维护者多年未对其进行修复，并拒绝https://github.com/nfl/react-helmet/issues/79

---

@Darkowic，我通过将`async =“ true”`添加到将jQuery添加到代码的`<script>`标签中来使您的代码正常工作。

4> 小智..：

---

Alex Mcmillan提供的答案对我帮助最大,但对于更复杂的脚本标签却不太有用.

我略微调整了他的答案,想出了一个带有各种功能的长标签解决方案,另外还设置了"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,如果你只是将内联JS转储到页面上......？

5> scabbiaza..：

---

如果你需要