React中条件性显示/隐藏DOM元素的实践：从样式控制到条件渲染

<p style={{color : "red", display : {isValid}}} >Invalid URL</p>

<p style={{ color: "red", display: isValid }} >Invalid URL</p>

import React, { useState } from 'react';

function ImageValidator() {
    const [imageUrl, setImageUrl] = useState('');
    // isValid 存储 CSS display 属性值
    const [isValidDisplay, setIsValidDisplay] = useState('none'); 

    const isUriImage = function(e) {
        const uri = e.target.value;
        setImageUrl(uri); // 更新输入框的值

        let processedUri = uri.toString().split('?')[0];
        const parts = processedUri.split('.');
        const extension = parts[parts.length - 1]?.toLowerCase(); // 获取小写扩展名
        const imageTypes = ['jpg', 'jpeg', 'tiff', 'png', 'gif', 'bmp'];

        if (imageTypes.includes(extension)) {
            setIsValidDisplay('none'); // 有效URL，隐藏提示
            console.log("Valid Image URL");
        } else {
            setIsValidDisplay('block'); // 无效URL，显示提示
            console.log("Not a Valid Image URL");
        }
    };

    return (
        <div>
            <input type="text" value={imageUrl} onChange={isUriImage} placeholder="输入图片URL" />
            {/* 使用 isValidDisplay 直接控制 display 属性 */}
            <p style={{ color: "red", display: isValidDisplay }}>无效的图片URL</p>
        </div>
    );
}

export default ImageValidator;

import React, { useState } from 'react';

function ImageValidatorConditional() {
    const [imageUrl, setImageUrl] = useState('');
    // isValid 是一个布尔值，表示URL是否有效
    const [isValidUrl, setIsValidUrl] = useState(true); // 初始假设为有效，或者不显示错误

    const isUriImage = function(e) {
        const uri = e.target.value;
        setImageUrl(uri);

        let processedUri = uri.toString().split('?')[0];
        const parts = processedUri.split('.');
        const extension = parts[parts.length - 1]?.toLowerCase();
        const imageTypes = ['jpg', 'jpeg', 'tiff', 'png', 'gif', 'bmp'];

        if (imageTypes.includes(extension)) {
            setIsValidUrl(true); // 有效URL
            console.log("Valid Image URL (Conditional Render)");
        } else {
            setIsValidUrl(false); // 无效URL
            console.log("Not a Valid Image URL (Conditional Render)");
        }
    };

    return (
        <div>
            <input type="text" value={imageUrl} onChange={isUriImage} placeholder="输入图片URL" />
            {/* 仅当 isValidUrl 为 false 时才渲染 <p> 标签 */}
            {!isValidUrl && <p style={{ color: "red" }}>无效的图片URL</p>}
        </div>
    );
}

export default ImageValidatorConditional;