React中如何实现基于按钮点击的动态if else条件判断

原代码存在的问题 #

1. 变量声明顺序错误：summaryLanguage和foreignLanguageMap在使用它们的代码之后定义，运行时会触发未定义错误。
2. 赋值逻辑错误：settings.language被赋值为{summaryLanguage}（一个对象），而不是具体的语言标识字符串，无法和foreignLanguageMap的键匹配。
3. 缺少点击事件处理：没有绑定按钮点击的逻辑，无法触发语言标识的输出操作。

正确实现方案 #

下面是基于React状态管理的完整实现，点击对应按钮就能直接输出目标语言标识：

import { useState } from 'react';

export default function LanguageSelector() {
    // 定义语言标识与按钮显示文本的映射
    const foreignLanguageMap = {
        english: 'English',
        spanish: 'Español',
        vietnamese: 'Tiếng Việt',
        tagalog: 'Tagalog',
        cantonese: '标准粤语',
        mandarin: '普通話'
    };

    // 用状态管理当前选中的语言标识
    const [selectedLang, setSelectedLang] = useState('');

    // 按钮点击处理函数
    const handleLangClick = (langKey) => {
        setSelectedLang(langKey);
        // 输出对应的语言标识
        console.log(langKey);
        // 可选：同时输出按钮显示文本和标识，用于验证
        console.log('按钮文本:', foreignLanguageMap[langKey], '语言标识:', langKey);
    };

    return (
        <div>
            {/* 遍历映射自动生成所有语言按钮 */}
            {Object.entries(foreignLanguageMap).map(([langKey, displayText]) => (
                <button 
                    key={langKey} 
                    onClick={() => handleLangClick(langKey)}
                    style={{ margin: '0 8px 8px 0' }}
                >
                    {displayText}
                </button>
            ))}
        </div>
    );
}

关键逻辑说明 #

• 状态管理：用useState保存当前选中的语言标识，确保状态更新时组件能响应式渲染。
• 动态生成按钮：通过Object.entries遍历映射，自动生成所有语言按钮，避免重复写按钮代码。
• 点击事件绑定：每个按钮点击时传入对应的语言标识（如spanish、cantonese），直接输出即可。

可选：根据按钮文本反向获取标识 #

如果需要通过按钮显示文本反查语言标识，可以生成反向映射：

// 生成反向映射：按钮文本 -> 语言标识
const reverseLangMap = Object.fromEntries(
    Object.entries(foreignLanguageMap).map(([key, val]) => [val, key])
);

// 示例：根据"标准粤语"获取"cantonese"
console.log(reverseLangMap['标准粤语']); // 输出 cantonese

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