如何在React.js中正确使用Google输入工具？代码报错求助

问题根源 #

• ESLint无法识别全局的google对象，触发no-undef错误
• 直接通过import引入远程CDN脚本不符合React模块规范
• 原代码嵌套函数的写法容易引发作用域问题

修正后的代码 #

/* global google */ // 声明google为全局变量，规避ESLint未定义错误
import React, { Component } from "react";
import PropTypes from "prop-types";

class EditText extends Component {
  constructor(props) {
    super(props);
    this.state = {
      element: ""
    };
    this.loadGoogleTransliterate = this.loadGoogleTransliterate.bind(this);
    this.initTransliteration = this.initTransliteration.bind(this);
  }

  componentDidMount() {
    this.loadGoogleTransliterate();
  }

  loadGoogleTransliterate() {
    // 动态创建script标签加载Google Transliterate API
    const script = document.createElement("script");
    script.src = "https://www.google.com/jsapi";
    script.async = true;
    script.onload = () => {
      google.load("elements", "1", {
        packages: "transliteration",
        callback: this.initTransliteration
      });
    };
    document.body.appendChild(script);
  }

  initTransliteration() {
    const options = {
      sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
      destinationLanguage: [google.elements.transliteration.LanguageCode.HINDI],
      shortcutKey: "ctrl+g",
      transliterationEnabled: true
    };
    const control = new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(["txtMessage"]);
  }

  render() {
    const { fontSize, Text } = this.props;

    return (
      <>
        <div
          id="txtMessage"
          contentEditable="true"
          style={{
            fontSize: fontSize
          }}
        >
          {Text}
        </div>
      </>
    );
  }
}

EditText.propTypes = {
  fontSize: PropTypes.string,
  Text: PropTypes.string
};

EditText.defaultProps = {
  fontSize: "16px",
  Text: ""
};

export default EditText;

关键修改说明 #

• 添加/* global google */注释，解决ESLint的未定义校验错误
• 替换原import远程脚本的方式，改为动态创建script标签加载Google JSAPI，符合React模块加载规范
• 将初始化逻辑拆分为独立方法，避免嵌套函数的作用域问题
• 优化props解构写法，简化render代码
• 补充propTypes和defaultProps，提升组件健壮性

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