React中如何根据按钮点击事件传递的按钮文本渲染对应组件

核心问题 #

你现在的写法错误点在于：

• 事件处理函数的返回值不会被React用作渲染内容，只有组件顶层return的JSX才会参与渲染
• 你没有把点击按钮对应的标识存到状态里，渲染弹窗的时候没法区分要展示的内容
• 直接在Dialog里写{toggleDialog}只是把函数本身输出，不会执行也不会拿到返回的JSX

修正方案 #

新增一个状态存储点击的按钮文本，点击时先更新这个状态再控制弹窗显隐，弹窗内容直接读取这个状态渲染即可。

修正后的完整代码 #

import React from 'react';
// 此处默认你的Button、Dialog等组件已正确引入
const Popup: React.FunctionComponent = () => {
    const [visible, setVisible] = React.useState<boolean>(false);
    // 新增状态存储点击的按钮文本
    const [btnText, setBtnText] = React.useState<string>('');

    const toggleDialog = (e: React.MouseEvent<HTMLButtonElement>) => {
        const currentText = e.currentTarget.textContent || '';
        // 处理底部No/Yes按钮的点击逻辑，你可以按需调整业务逻辑
        if (currentText === 'No' || currentText === 'Yes') {
            setVisible(false);
            return;
        }
        // 存储点击的按钮文本
        setBtnText(currentText);
        setVisible(true);
    };

    const closeDialog = () => {
        setVisible(false);
    };

    return (
        <>
            <Button variant="primary" onClick={toggleDialog}>Primary</Button>
            <Button variant="secondary" onClick={toggleDialog}>secondary</Button>
            {visible && <Dialog title={"Please confirm"} onClose={closeDialog}>
                {/* 直接用状态值渲染对应内容，要渲染不同组件可在此处加判断 */}
                <div>
                    <p>{btnText}</p>
                    {/* 如需渲染完全不同的组件，可替换为如下逻辑：
                    {btnText === 'Primary' ? <PrimaryComponent /> : <SecondaryComponent />}
                    */}
                </div>
                <DialogActionsBar>
                    <button className="button" onClick={toggleDialog}>No</button>
                    <button className="button" onClick={toggleDialog}>Yes</button>
                </DialogActionsBar>
            </Dialog>}
        </>
    )
}

export default Popup;

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