setTimeout反应后触发重新渲染

Question

我正在努力使自己了解React，并且正在做一些项目。其中一项涉及在setTime用完后在变量更改后重新呈现组件。

我想它必须重新渲染，因为它会在初始渲染后发生变化（并且它不会对更新的变量做出反应（嘿）。

我猜我在这里误解了一些React基础知识。

箭头提示我的问题。

组件：

import React from 'react';
import classes from './Navigation.module.css';

const navigation = (props) => {
    let attachedClasses = [classes.SmallDot];
    let showCloseButton = false; <-------!
    if (props.currentState) {
        attachedClasses = [classes.BigDot]
        setTimeout(() => {
            showCloseButton = true; <----------!
        }, 500)

    }

    return (
        <div onClick={props.currentState ? null : props.toggleMenuState} className={attachedClasses.join(' ')}>
            {showCloseButton ? <--------!
                <div onClick={props.toggleMenuState} className={classes.CloseButton}>
                    <div>X</div>
                </div>
                : null}
        </div>
    )
};

export default navigation;