React点击触发组件渲染问题：如何修改onEditLangClicked函数？

问题核心 #

你当前的写法错误在于：React不能直接在事件处理函数里通过写<ModalAddNgonNgu />来渲染组件，这种写法不会触发组件挂载，必须通过状态驱动渲染逻辑。

具体修改步骤 #

1. 修正onEditLangClicked函数

只保留状态更新逻辑，删除函数内的组件代码，同时修正语法错误：

function onEditLangClicked(event, lang) {
    setEditMode(true);
    setLang(lang);
    // 新增：添加控制模态框显示的状态（若未定义，需在父组件顶部声明：const [isModalOpen, setIsModalOpen] = useState(false);）
    setIsModalOpen(true);
    console.log(lang); // 修正原代码里的console.log/(lang)语法错误
}

2. 在父组件JSX中条件渲染模态框

把<ModalAddNgonNgu />放在父组件的return结构内，用状态控制显示：

// 父组件return内的合适位置添加
{isModalOpen && (
    <ModalAddNgonNgu 
        lang={lang} 
        onClose={() => {
            setIsModalOpen(false);
            setEditMode(false);
        }} 
    />
)}

3. 调整ModalAddNgonNgu适配编辑场景

移除原组件内的触发按钮，改成由props控制显示的模态框（适配Bootstrap样式）：

import { useEffect } from 'react';

const ModalAddNgonNgu = ({ lang, onClose }) => {
    // 监听ESC键关闭模态框
    useEffect(() => {
        const handleEsc = (e) => {
            if (e.key === 'Escape') onClose();
        };
        window.addEventListener('keydown', handleEsc);
        return () => window.removeEventListener('keydown', handleEsc);
    }, [onClose]);

    return (
        <>
            {/* 模态框主体 */}
            <div className="modal fade show d-block" id="myModalAddNgonNgu" tabIndex="-1" aria-modal="true" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">编辑语言：{lang.language_name}</h5>
                            <button type="button" className="btn-close" onClick={onClose} aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            {/* 此处放置编辑表单，用lang的数据填充字段 */}
                            <div className="mb-3">
                                <label className="form-label">语言名称</label>
                                <input type="text" className="form-control" defaultValue={lang.language_name} />
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" onClick={onClose}>取消</button>
                            <button type="button" className="btn btn-primary">保存修改</button>
                        </div>
                    </div>
                </div>
            </div>
            {/* 模态框遮罩层 */}
            <div className="modal-backdrop fade show"></div>
        </>
    );
};

export default ModalAddNgonNgu;

关键逻辑说明 #

React是状态驱动视图的框架：事件处理函数仅负责修改状态，状态变化会自动触发组件重渲染，此时通过条件判断决定是否渲染目标组件，这才是符合React设计逻辑的写法。

内容的提问来源于stack exchange，提问作者Lê Trung Hiếu