我希望打开和关闭我的显示<p>标签

Question

我想根据链接是否为 URL 来切换<p>标记。

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

确定 isValid 值的函数是

const [isValid, setIsValid] = useState('none');

const isUriImage = function(uri) {
    console.log(isValid)
    setImage_url(uri.target.value);
    uri = uri.target.value;
    uri = uri.toString().split('?')[0];
    var parts = uri.split('.');
    var extension = parts[parts.length-1];
    var imageTypes = ['jpg','jpeg','tiff','png','gif','bmp']
    if(imageTypes.indexOf(extension) != -1) {
        setIsValid('none');   
        console.log("Valid")
    } else {
        setIsValid('');
        console.log("Not Valid")
    }
}

代码工作正常，因为我已经用 console.log 语句确认了它，但是我的<p>标记的显示没有改变。

Answer 1

您将显示属性设置为和对象，键为 isValid，而不是直接将 isValid 分配为变量

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

顺便提一下，如果您只想有条件地隐藏它，那么在 React 方式中，最好根本不渲染 p 标签

改为使用布尔值

const [isValid, setIsValid] = useState(false);

有条件地渲染

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

在您的场景中，您的元素显示将是“无”，但它仍将在 DOM 中。 在上述情况下，它不会被渲染到 DOM。

Answer 2

只需删除isvalid变量周围的额外{}即可。

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