React+Antd项目：如何在QRReader模态界面隐藏Approve与Cancel按钮？

核心思路是利用现有状态data的取值控制按钮显示：当data === 0时显示QRReader界面，此时不渲染按钮；当data !== 0时切换到PatientForm界面，同时渲染按钮。只需给按钮所在的<Row>添加条件渲染判断即可。

修改后的完整代码如下：

import { Button, Col, Row } from "antd";
import { useState } from "react";
import { QrReader } from "react-qr-reader";
import patient from "../../../api/nuclearMedicineApi/services/Patient";
import { decrypt } from "../../../utils/decryption";
import PatientForm from "./form";
import { QrcodeOutlined } from '@ant-design/icons';
import BasicModal from "../modal";
import { FormattedMessage } from "react-intl";
import { notify } from "../notification";

const QRScanner = () => {
    const [data, setData] = useState<number>(0);
    const [patientInfoData, setPatientInfoData] = useState({})
    const [modelVisible, setModelVisible] = useState<any>();

    console.log('datadatadata: ', data)
  
    const openNotificationWithIcon = () => {
        notify('success', 'ok', 'approve-message');
    };
    

    return (
        <>
            <QrcodeOutlined
                className='cursor-pointer'
                style={{ fontSize: '2rem' }}
                color={'#fff'}
                onClick={(e) => {
                    e.stopPropagation()
                    setModelVisible(true)
                }}
            />
            <BasicModal
                header={<><h2 className='text-primary'><FormattedMessage id="qr-scanner" /></h2></>}
                content={
                    <>
                        {
                            data !=0 ?
                                <PatientForm patientInfoData={patientInfoData} data={data} />
                                :
                                <Row>
                                    <Col span={18} offset={3}>
                                        <QrReader
                                            onResult={async (result: any, error) => {
                                                if (!!result) {
                                                    const t = result?.text;
                                                    const d = decrypt(t);
                                                    let zz: any = d.match(/(\d+)/)
                                                    Math.floor(zz[0])
                                                    setData(zz[0]);
                                                    const pationInfo = await patient.patientGet({ Id: Number(zz[0]) })
                                                    setPatientInfoData(pationInfo)
                                                }
                                                if (!!error) {
                                                    console.info(error);
                                                }
                                            }}
                                            constraints={{ facingMode: 'user' }}
                                        />
                                    </Col>
                                </Row>
                        }
                        {/* 仅当data不为0时渲染按钮 */}
                        {data !== 0 && (
                            <Row>
                                <Col span={1} offset={3}>
                                    <Button
                                        type='primary'
                                        className='savebtn'
                                        onClick={() => {
                                            patient.switchToPresent(data || 0)
                                            openNotificationWithIcon()
                                        }}
                                    >
                                        <FormattedMessage id={'approve'} />
                                    </Button>
                                </Col>
                                <Col span={8} offset={4}>
                                    <Button
                                        type='default'
                                        className='savebtn'
                                        onClick={() => {
                                            setModelVisible(false);
                                            setData(0);
                                        }}
                                    >
                                        <FormattedMessage id={'cancel'} />
                                    </Button>
                                </Col>
                            </Row>
                        )}
                    </>
                }
                isOpen={modelVisible}
                footer={false}
                width='50vw'
                handleCancel={() => {
                    setModelVisible(false);
                }}
                afterClose={() => setData(0)}
            />
        </>
    )
};

export default QRScanner;

关键修改说明 #

把原先直接渲染的按钮Row，用{data !== 0 && (...) }包裹起来：

• 当data === 0（未扫描到有效数据，显示QRReader界面）时，条件不成立，按钮不会被渲染
• 当data !== 0（扫描成功，显示PatientForm界面）时，条件成立，按钮正常显示

这种方式完全复用了现有状态的判断逻辑，不需要额外新增状态变量，简洁高效。

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