React中根据URL有效性切换p标签display样式不生效问题

JSX中行内样式要求传入CSS属性键值对构成的普通对象，现有代码display : {isValid}存在传值错误：

• 样式对象外层的{}是JSX语法标记，代表括号内为JavaScript表达式
• 给display属性赋值时额外嵌套了一层{}，导致实际传入的display值是{ isValid: 'none' }/{ isValid: '' }结构的对象，并非CSS规则要求的字符串类型值
• 浏览器无法识别非法的display属性值，因此显示状态不会随isValid的更新切换

去掉display赋值时多余的大括号，直接传入字符串类型的isValid状态即可：

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

不建议把CSS属性值直接存在状态中，用布尔值标记校验结果可读性、可维护性更好，同时可以兼容后缀大写的输入场景：

// 用布尔值标记URL是否无效，默认隐藏错误提示
const [isUrlInvalid, setIsUrlInvalid] = useState(false);

const isUriImage = function(e) {
    const inputValue = e.target.value;
    setImage_url(inputValue);
    // 处理URL拿到后缀
    const processedUri = inputValue.toString().split('?')[0];
    const parts = processedUri.split('.');
    const extension = parts[parts.length - 1].toLowerCase();
    const imageTypes = ['jpg','jpeg','tiff','png','gif','bmp']
    // 更新校验状态
    setIsUrlInvalid(!imageTypes.includes(extension));
}

对应p标签写法，显式指定合法的display值，避免空字符串导致的样式兼容问题：

<p style={{color: "red", display: isUrlInvalid ? 'block' : 'none'}}>Invalid URL</p>

内容的提问来源于stack exchange，提问作者Shlok Sharma