仅在文件选择后的组件外观答案

【问题标题】：Component appearance only after file selection仅在文件选择后的组件外观
【发布时间】：2022-08-16 16:54:55
【问题描述】：

我的网站页面上有一个按钮，允许用户从他们的设备中选择一个文件。

接下来，我在一个特殊的框中显示文件名，提示用户将此文件转换为所需的格式。

但是，显示文件的这个框总是出现在页面上（在下面的代码中，这个框放在 Card 组件中）。

我希望此框仅在用户选择文件时出现。如果用户想要取消操作，那么他可以关闭此框（我的代码中的图标 CloseIcon）。

告诉我如何做到这一点？

export default function DisplaySelectedFile() {
    const [fileName, setFileName] = useState(\"\");
    return (
        <div>
            <SelectFileButton setFileName={setFileName} />

                <Card sx={styles.CommonStyle}>
                    <Stack spacing={10} direction=\"row\" style={{paddingTop: \"20px\", paddingLeft: \"10px\"}}>
                        <div>{fileName}</div>

                        <Stack spacing={3} direction=\"row\">
                            <div>Convert to</div>
                            <ConvertToFormatFile></ConvertToFormatFile>
                        </Stack>

                        <Button>CONVERT</Button>
                        <CloseIcon/>
                        
                    </Stack>
                </Card>
            
        </div>
    );
}

为了更好地理解我的问题，我会给一张照片。也就是说，我希望橙色框不总是出现在页面上，而只有在用户选择了文件时才会出现。如果需要，这个盒子可以关闭。

标签： javascript reactjs

【解决方案1】：

您可以检查fileName的长度并出示卡片

            <SelectFileButton setFileName={setFileName} />

                { fileName.length>0 &&<Card sx={styles.CommonStyle}>
                    <Stack spacing={10} direction="row" style={{paddingTop: "20px", paddingLeft: "10px"}}>
                        <div>{fileName}</div>

                        <Stack spacing={3} direction="row">
                            <div>Convert to</div>
                            <ConvertToFormatFile></ConvertToFormatFile>
                        </Stack>

                        <Button>CONVERT</Button>
                        <CloseIcon/>
                        
                    </Stack>
                </Card>}

【讨论】：