如何在 react js 中使用 google-input-tool答案

【问题标题】：how to used google-input-tool in react js如何在 react js 中使用 google-input-tool
【发布时间】：2022-12-14 13:13:49
【问题描述】：

我将代码用作 Google Transliterate API 开发人员指南，但它不起作用

代码

 import React, { Component } from "react";
    import PropTypes from "prop-types";
    import $ from 'jquery';
    import  'https://invitationindia.pages.dev/app-js/translation.min.js';
class EditText extends Component {
constructor(props) {
    super(props);
    this.state = {
      element: "",  
    }
  }

 componentDidMount() {
         
    google.load("elements", "1", { packages: "transliteration" });
    let control;
    function onLoad() {         
      var options = {
        //Source Language
        sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
        // Destination language to Transliterate
        destinationLanguage: [google.elements.transliteration.LanguageCode.HINDI],
        shortcutKey: "ctrl+g",
        transliterationEnabled: true
      },                    
      control = new google.elements.transliteration.TransliterationControl(options);  
      control.makeTransliteratable(["txtMessage"]);   
    }
    google.setOnLoadCallback(onLoad);
  }

render() {

    const { props } = this;

    return (

      <>
        <div id="txtMessage" contentEditable="true"
          style={{
            fontSize: props.fontSize,
          }}
        >
          {props.Text}
        </div>
       
      </>
    );
  }
}
export default EditText;

请帮助我如何编写正确的代码

错误第 40:5 行：'google' 未定义 no-undef 行 45:25：“google”未定义 no-undef 行 47:31：“google”是未定义 no-undef 行 51:21: 'google' 未定义 no-undef 第 54:5 行：“google”未定义 no-undef

【问题讨论】：

标签： javascript reactjs translation contenteditable google-input-tools

【解决方案1】：

如果你想添加谷歌输入工具，你可以使用下面的代码来添加它

// Load the Google Transliteration API
      google.load("elements", "1", {
        packages: "transliteration"
      });
    
      function onLoad() {
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['gu', 'ml', 'hi', 'kn', 'ta', 'te'],
          shortcutKey: 'ctrl+m',
          transliterationEnabled: true
        }
    
        // Create an instance on TransliterationControl with the required options.
        var control = new google.elements.transliteration.TransliterationControl(options);
    
        // Enable transliteration in the textfields with the given ids.
        var ids = ["language"];
        control.makeTransliteratable(ids);
    
        // Show the transliteration control which can be used to toggle between English and other destination language.
        control.showControl('translControl');
      }
    
      google.setOnLoadCallback(onLoad);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
  
<textarea name="hi"  rows="6"  id="language" cols="6" style="width:600px;height:70px" ></textarea>

<div id='translControl'></div>

【讨论】：