英文:
Render a different div when input is filled
问题
我有这个空输入 这里，当插入图像时，我想要用图像预览替换那里的图标和文本。问题在这里。当图像预览存在时，我想要删除"Drop app logo......."。现在的方式看起来不整洁。
const images = files.map((file) => (
<img
key={file.name}
src={file.preview}
alt="image"
style={{ width: "50%", height: "50%" }}
/>
));
<Flex width={{ sm: "340px", md: "450px" }}>
{images && (<><div>{images}</div></>)}
{images !== null && (<>
<Box>
<AiOutlineCloudUpload size={30} />
</Box>
<Box>
<Text fontSize="sm"> Drop app logo here or{" "}
<Button variant="link" color="#002c8a">browse</Button>
</Text>
</Box>
</>)}
</Flex>
英文:
I have this empty input here and I want to replace the icon and the text there with the image preview when an image is inserted in it. The problem. I want to remove the "Drop app logo......." when the image preview is there. It does'nt look neat the way it is right now
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const images = files.map((file) => (
<img
key={file.name}
src={file.preview}
alt="image"
style={{ width: "50%", height: "50%" }}
/>
));
<Flex width={{ sm: "340px", md: "450px" }}>
{images && (<><div>{images}</div></>)}
{images !== null && (<><Box>
<AiOutlineCloudUpload size={30} />
</Box>
<Box>
<Text fontSize="sm"> Drop app logo here or{" "}
<Button variant="link" color="#002c8a">browse
</Button>
</Text>
</Box>
</>
)}
</Flex>
<!-- end snippet -->
答案1
得分: 1
您的布尔逻辑不正确；images 是一个数组，在JavaScript中，数组（即使是空数组）永远不会是假值。因此，images && (<div>{images}</div>) 部分始终会被渲染，因为 images 始终是真值，但是 images !== null && (<Box>... 块也始终会被渲染，因为 images 永远不会为 null。
尝试使用以下方式，如果存在图像则渲染图像，如果不存在图像则渲染上传提示。（我还删除了一个不必要的React片段(<></>)。）
<Flex width={{ sm: "340px", md: "450px" }}>
{images.length > 0 && <div>{images}</div>}
{images.length === 0 && (
<>
<Box>
<AiOutlineCloudUpload size={30} />
</Box>
<Box>
<Text fontSize="sm">将应用程序标志拖放到这里或<Button variant="link" color="#002c8a">浏览</Button></Text>
</Box>
</>
)}
</Flex>
英文:
Your boolean logic is incorrect; images is an array, and in JavaScript, arrays (even empty arrays) are never falsy. So the images && (<><div>{images}</div></>) section will always render, because images is always truthy, but the images !== null && (<><Box>... block will always render too, because images is never null.
Try something like this instead, to render images if images exist and to render the upload prompt if no images exist. (I'm also removing a spurious React fragment (<>).)
<Flex width={{ sm: "340px", md: "450px" }}>
{images.length > 0 && <div>{images}</div>}
{images.length === 0 && (<>
<Box>
<AiOutlineCloudUpload size={30} />
</Box>
<Box>
<Text fontSize="sm"> Drop app logo here or{" "}
<Button variant="link" color="#002c8a">browse
/Button>
</Text>
</Box>
</>)}
</Flex>
答案2
得分: 0
如果您想在图像加载时删除文本
也许您可以在<Text></Text>标签内部添加条件
当图像 !== null 时，它将附加空字符串
const images = files.map((file) => (
<img
key={file.name}
src={file.preview}
alt="image"
style={{ width: "50%", height: "50%" }}
/>
));
<Flex width={{ sm: "340px", md: "450px" }}>
{images && (
<>
<div>{images}</div>
</>
)}
{images !== null && (
<>
<Box>
<AiOutlineCloudUpload size={30} />
</Box>
<Box>
<Text fontSize="sm">
{images !== null ? "" : "将应用程序标志拖到这里或 "}
<Button variant="link" color="#002c8a">
浏览
</Button>
</Text>
</Box>
</>
)}
</Flex>
英文:
If you want to remove the text when image is loaded
maybe you can add conditional inside <Text></Text> tag
it will append empty string when image !== null
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
const images = files.map((file) => (
<img
key={file.name}
src={file.preview}
alt="image"
style={{ width: "50%", height: "50%" }}
/>
));
<Flex width={{ sm: "340px", md: "450px" }}>
{images && (<><div>{images}</div></>)}
{images !== null && (<><Box>
<AiOutlineCloudUpload size={30} />
</Box>
<Box>
<Text fontSize="sm"> {images !== null ? "" : "Drop app logo here or "}
<Button variant="link" color="#002c8a">browse
</Button>
</Text>
</Box>
</>
)}
</Flex>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论