Saya ingin menyederhanakan komponen saya karena saya mengembalikan Modal, komponen Window dan dua div saya dua kali, saya ingin merendernya sekali dan hanya mengganti div judul, barContainer dan storageText ketika prop mode diubah.

Satu-satunya hal yang berubah di dalamnya jika modalMode berubah adalah bagian ini:

(apa yang ada di dalam div ini.)

 <div className={styles.title}></div>
 <div className={styles.barContainer}>
 <span className={styles.storageText}>
 </div>

Sisanya (Modal, Window, menuButton, dan subtitle div) selalu sama.

Inilah komponen saya:

const modalMode: StorageWarningModalTypes = "STORAGE_LIMIT_EXCEEDED";

type Props = {
    storageUsed: number;
    storageAvailable: number;
    fileSize: number;
    mode: string;
    percentageUsed: number;
    disableProButton: boolean;
    onClose: Function;
};
const StorageModals = ({
    storageUsed,
    storageAvailable,
    fileSize,
    mode,
    percentageUsed,
    disableProButton,
    onClose,
}: Props) => {
    if (!storageUsed || storageUsed < 0) storageUsed = 0;
    if (!storageAvailable || storageAvailable < 0) storageAvailable = 0;

    if (mode === modalMode) {
        return (
            <div>
                <Modal className={styles.container} onClickOutside={onClose}>
                    <Window
                        title={" "}
                        maxHeight={MODAL_MAX_HEIGHT}
                        className={styles.storageModal}
                        showCloseButton={true}
                        onClose={onClose}
                    >
                        <div className={styles.cardContainer}>

                            **<div className={styles.title}></div>
                            <div className={styles.barContainer}>
                                <span className={styles.storageText}>
                            </div>**

---> this part stays the same:

                            <div className={styles.subtitle}></div>
                            <MenuButton></MenuButton>
                        </div>
                    </Window>
                </Modal>
            </div>
        );

    } else
        return (
            <div>
                <Modal className={styles.container} onClickOutside={onClose}>
                    <Window
                        title={" "}
                        maxHeight={MODAL_MAX_HEIGHT}
                        className={styles.storageModal}
                        showCloseButton={true}
                        onClose={onClose}
                    >
                        
                        <div className={styles.cardContainer}>

                            **<div className={styles.title}></div>
                            <div className={styles.barContainer}>
                                <span className={styles.storageText}>
                            </div>**

                            <div className={styles.subtitle}></div>
                            <MenuButton></MenuButton>
                        </div>
                    </Window>
                </Modal>
            </div>
        );
};

export default StorageModals;
0
Rakai 12 Mei 2021, 17:27

1 menjawab

Jawaban Terbaik

Anda dapat menghapus return bersyarat dan sebagai gantinya, jika itu adalah nama kelas yang ingin Anda ubah, gunakan nama kelas bersyarat:

 <div className={mode === modalMode ? styles.title : 'your other classname'}></div>
 <div className={mode === modalMode ? styles.barContainer : 'your other classname'}>
   <span className={mode === modalMode ? styles.storageText : }>
 </div>

Atau, jika konten di dalam div yang ingin Anda ubah, Anda dapat merender konten secara kondisional dengan ternary juga:

<div>{condition ? 'some content' : 'other content'}</div>
1
Al Duncanson 12 Mei 2021, 14:33