如何在React应用中通过点击按钮实现文本翻译功能

现有代码存在的问题 #

• 缺少React内置useState钩子的导入，运行会直接报错
• 选型错误：react-translate-component + counterpart 是静态国际化工具，仅支持提前录入的固定文案多语言切换，无法处理用户输入的任意动态文本的翻译需求
• 语法错误：JSX组件只能写在组件的返回渲染逻辑中，事件处理函数内写<Translate />不会产生任何实际效果
• 翻译包注册逻辑错误：你当前写的counterpart.registerTranslations('hn',{textarea:{text}}) 仅会把初始化时的空text值存入语言包，完全无法匹配用户输入的动态内容

解决方案 #

根据你的实际需求选择对应方案即可：

场景1：仅需要切换网站固定界面文案的多语言（不需要翻译用户输入内容）

修正后的代码如下：

import { useState } from 'react';
import counterpart from 'counterpart';
import Translate from 'react-translate-component';

// 提前录入所有固定界面文案的多语言版本
counterpart.registerTranslations('en',{
    page: {
        heading: "Text Tool",
        summary: "Your Text Summary",
        preview: "Preview",
        upperBtn: "Convert to Uppercase",
        lowerBtn: "Convert to Lowercase",
        trBtn: "Translate into Hindi"
    }
});
counterpart.registerTranslations('hn',{
    page: {
        heading: "पाठ उपकरण",
        summary: "आपके पाठ का सारांश",
        preview: "पूर्वावलोकन",
        upperBtn: "अपरकेस में बदलें",
        lowerBtn: "लोअरकेस में बदलें",
        trBtn: "हिंदी में अनुवाद करें"
    }
});
// 默认加载英文界面
counterpart.setLocale('en');

export default function TextForm() {
    const [text, setText] = useState('');
    const handleOnChange = (event) => {
        setText(event.target.value);
    }
    const handleUpChange = () => {
        let newText = text.toUpperCase();
        setText(newText);
    }
    const handleLoChange = () => {
        let newText = text.toLowerCase();
        setText(newText);
    }
    // 切换界面显示语言
    const handleTrChange = () => {
        counterpart.setLocale(counterpart.getLocale() === 'en' ? 'hn' : 'en');
    }
    return (
        <>
            <div className="container my-3">
                <h1><Translate content="page.heading" /></h1>
                <div className="mb-3">
                    <textarea className="form-control" id="myBox" value={text} onChange={handleOnChange} placeholder="Enter here" rows="8"></textarea>
                </div>
                <button className="btn btn-primary mx-1" onClick={handleUpChange}><Translate content="page.upperBtn" /></button>
                <button className="btn btn-primary mx-1" onClick={handleLoChange}><Translate content="page.lowerBtn" /></button>
                <button className="btn btn-primary mx-1" onClick={handleTrChange}><Translate content="page.trBtn" /></button>
            </div>
            <div className="container my-3">
                <h2><Translate content="page.summary" /></h2>
                <p>{text.split(' ').length} words and {text.length} characters</p>
                <p>{0.008 * text.split(' ').length} Minutes read</p>
                <h3><Translate content="page.preview" /></h3>
                <p>{text}</p>
            </div>
        </>
    )
}

场景2：需要翻译用户输入的任意文本内容

这种场景你需要调用第三方翻译服务的开放API，示例代码如下，替换其中的API调用逻辑为你申请的翻译服务接口即可：

import { useState } from 'react';

export default function TextForm(props) {
    const [text, setText] = useState('');
    const [loading, setLoading] = useState(false);
    const handleOnChange = (event) => {
        setText(event.target.value);
    }
    const handleUpChange = () => {
        let newText = text.toUpperCase();
        setText(newText);
    }
    const handleLoChange = () => {
        let newText = text.toLowerCase();
        setText(newText);
    }
    const handleTrChange = async () => {
        if(!text.trim()) return;
        setLoading(true);
        try {
            // 替换为你使用的翻译服务API调用逻辑
            const res = await fetch('你的翻译API接口地址', {
                method: 'POST',
                body: JSON.stringify({
                    sourceText: text,
                    sourceLang: 'en',
                    targetLang: 'hn'
                })
            });
            const data = await res.json();
            // 假设接口返回的翻译结果存在translatedText字段，根据实际接口结构调整即可
            setText(data.translatedText);
        } catch (err) {
            console.error('翻译失败', err);
        } finally {
            setLoading(false);
        }
    }
    return (
        <>
            <div className="container my-3">
                <h1>{props.heading}</h1>
                <div className="mb-3">
                    <textarea className="form-control" id="myBox" value={text} onChange={handleOnChange} placeholder="Enter here" rows="8"></textarea>
                </div>
                <button className="btn btn-primary mx-1" onClick={handleUpChange}>Convert to Uppercase</button>
                <button className="btn btn-primary mx-1" onClick={handleLoChange}>Convert to Lowercase</button>
                <button className="btn btn-primary mx-1" onClick={handleTrChange} disabled={loading}>
                    {loading ? '翻译中...' : 'Translate into Hindi'}
                </button>
            </div>
            <div className="container my-3">
                <h2>Your Text Summary</h2>
                <p>{text.split(' ').length} words and {text.length} characters</p>
                <p>{0.008 * text.split(' ').length} Minutes read</p>
                <h3>Preview</h3>
                <p>{text}</p>
            </div>
        </>
    )
}

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