ReactJS中集成Yamli API失效问题求助

问题描述 #

我想在React的Home组件中使用Yamli API，它可以将文本框内容转写为阿拉伯语。在普通HTML/CSS/JS环境下，集成代码如下：

<!-- YAMLI CODE START -->
<script type="text/javascript" src="https://api.yamli.com/js/yamli_api.js"></script>
<script type="text/javascript">
  if (typeof(Yamli) == "object" && Yamli.init( { uiLanguage: "en" , startMode: "onOrUserDefault" } ))
  {
    Yamli.yamlify( "searchArabic", { settingsPlacement: "bottomLeft" } );
  }
</script>
<!-- YAMLI CODE END -->

我尝试了以下操作但完全不生效：

• 在public/index.html中引入Yamli脚本
• 在Home组件的useEffect钩子中添加初始化代码
• 我的Home.js代码如下：

import React , {useEffect} from 'react';
import './Home.css';
import search from './search.png';
import Footer from "./Footer";
import Yamli from 'react-yamli';

function Home()
{
    useEffect(()=>{
        if (typeof(Yamli) == "object" && Yamli.init( { uiLanguage: "en" , startMode: "onOrUserDefault" } ))
        {
          Yamli.yamlify( "searchArabic", { settingsPlacement: "bottomLeft" } );
        }
    })

    return(
        <>
        <div id="searchBox">
            <div id="search">
                <img src={search} alt="search-Button"/>
                <input id="searchArabic" type="textbox" placeholder='Enter text here.'/>
            </div>
        </div>

        <div id="copyBox">
            <textarea type="textbox" placeholder='Enter text to copy.' height = "50" />
        </div>

        <Footer/>
        </>
    );
}

export default Home;

解决方法 #

1. 移除冲突依赖 #

你同时引入了全局Yamli脚本和react-yamli包，这会导致命名冲突。直接删除import Yamli from 'react-yamli';这一行，仅保留全局脚本的引入。

2. 修正useEffect执行逻辑 #

• 添加空依赖数组[]，确保初始化代码仅在组件挂载时执行一次，避免重复初始化Yamli
• 增加脚本加载完成的判断，确保Yamli对象可用后再执行初始化

修改后的useEffect代码：

useEffect(() => {
    const initYamli = () => {
        // 检查目标输入元素是否存在
        const inputElement = document.getElementById("searchArabic");
        if (!inputElement) return;

        // 初始化Yamli并绑定到输入框
        if (window.Yamli && typeof window.Yamli.init === 'function') {
            const isInitialized = window.Yamli.init({ 
                uiLanguage: "en", 
                startMode: "onOrUserDefault" 
            });
            if (isInitialized) {
                window.Yamli.yamlify("searchArabic", { 
                    settingsPlacement: "bottomLeft" 
                });
            }
        }
    };

    // 脚本已加载则直接初始化，否则监听加载事件
    if (window.Yamli) {
        initYamli();
    } else {
        const script = document.querySelector('script[src="https://api.yamli.com/js/yamli_api.js"]');
        if (script) script.onload = initYamli;
    }
}, []);

3. 确认脚本引入顺序 #

在public/index.html中，将Yamli脚本放在React根元素之后引入，保证脚本加载顺序正确：

<!-- public/index.html -->
<body>
    <div id="root"></div>
    <script type="text/javascript" src="https://api.yamli.com/js/yamli_api.js"></script>
</body>

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