ReactJs：我怎样才能简化这个组件，这样我就不必渲染我的 Modal 和 window 组件两次？

Question

我想简化我的组件，因为我要返回我的 Modal、Window 组件和两个 div 两次，我想渲染它们一次并且只交替显示标题、barContainer 和 storageText divs 当模式道具改变时。

如果 modalMode 改变，它内部唯一改变的是这部分：

（这个 div 里面是什么。）

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

其余的（Modal、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 中的内容，您也可以使用 ternary 有条件地呈现内容：

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

ReactJs：我怎样才能简化这个组件，这样我就不必渲染我的 Modal 和 window 组件两次？

ReactJs: How can I simplify this component so that I do not have to render my Modal and window component twice?

javascript

reactjs

typescript

rendering