ReactJs：如何簡化這個組件，這樣我就不必渲染我的 Modal 和 window 組件兩次？

Question

我想簡化我的組件，因為我要返回我的 Modal、Window 組件和兩個 div 兩次，我想渲染它們一次，並且只在模式道具改變時交替標題、barContainer 和 storageText div。

如果 modalMode 發生變化，其中唯一會發生變化的是這部分：

（這個div里面有什么。）

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

rest（模態，Window，menuButton 和字幕 div）始終保持不變。

這是我的組件：

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;

Answer 1

您可以刪除條件return ，如果它是您要更改的類名，請使用條件類名：

 <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>

或者，如果它是您要更改的 div 內的內容，您也可以有條件地使用三元組渲染內容：

<div>{condition ? 'some content' : 'other content'}</div>