React应用引入外部JavaScript文件后函数未定义该如何解决

问题根因 #

• 动态加载的外部脚本将showGrid挂载为全局变量，ESLint的no-undef规则无法识别未在当前模块声明的变量，会抛出编译错误
• 未处理脚本加载时序：脚本为异步加载，组件渲染时直接调用showGrid，大概率脚本还未加载完成，函数不存在
• 你代码本身存在笔误：定义的静态方法名为rendersGrid，调用时写的是renderGrid，多了一个s

解决方案 #

方案1：外部JS可修改（推荐） #

直接将外部JS改造为ES模块，通过导入的方式使用，避免全局变量污染和时序问题。

1. 修改外部JS文件，导出showGrid方法

// 你的外部JS文件，比如命名为gridRender.js
export function showGrid(data) {
  // 原有渲染逻辑保持不变
}

2. 在React组件中导入使用

import { showGrid } from './你的文件路径/gridRender.js'
import React from 'react'

class ShowInGrid extends React.Component {
  state = {
    loading: true,
    data: []
  }

  componentDidMount() {
    // 调用接口获取服务端数据
    fetch('/你的数据接口地址')
      .then(res => res.json())
      .then(data => {
        this.setState({
          data,
          loading: false
        })
      })
  }

  static renderGrid(data) {
    return showGrid(data)
  }

  render() {
    const contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : ShowInGrid.renderGrid(this.state.data)
    return <div>{contents}</div>
  }
}

export default ShowInGrid

方案2：外部JS不可修改，必须动态加载 #

1. 处理ESLint报错：调用全局变量时加window.前缀，或者在文件顶部添加注释/* global showGrid */告知ESLint这是全局变量
2. 监听脚本加载完成事件，等脚本加载完毕后再调用函数

import React from 'react'

class ShowInGrid extends React.Component {
  state = {
    loading: true,
    data: [],
    scriptLoaded: false // 新增脚本加载状态标记
  }

  componentDidMount() {
    // 动态创建script标签加载外部JS
    const script = document.createElement('script')
    script.src = '你的外部JS文件完整路径'
    script.className = 'external-script'
    // 脚本加载完成后更新状态
    script.onload = () => {
      this.setState({ scriptLoaded: true })
      // 脚本加载完成后再请求数据，避免数据回来脚本还没加载完
      this.loadServerData()
    }
    document.body.appendChild(script)
  }

  loadServerData = () => {
    fetch('/你的数据接口地址')
      .then(res => res.json())
      .then(data => {
        this.setState({
          data,
          loading: false
        })
      })
  }

  static renderGrid(data) {
    // 加window前缀调用全局函数，避免ESLint报错
    return window.showGrid(data)
  }

  render() {
    // 同时判断数据和脚本都加载完成再渲染网格
    const contents = this.state.loading || !this.state.scriptLoaded
      ? <p><em>Loading...</em></p>
      : ShowInGrid.renderGrid(this.state.data)
    return <div>{contents}</div>
  }
}

export default ShowInGrid

注意事项 #

• 如果外部JS是跨域资源，需要对应静态资源服务器配置CORS规则，否则会加载失败
• 如果你使用react-script-tag组件，逻辑和方案2一致，只需要监听组件的onLoad事件更新scriptLoaded状态即可

内容的提问来源于stack exchange，提问作者eug100