仅在选择文件后显示零部件外观

Question

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

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

但是，显示文件的此框始终显示在页面上(在下面的代码中，此框位于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>
);
}

Answer 1

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

{fileName && <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>}