javascript – 如果React中不存在JSON密钥,如何隐藏HTML元素
作者:互联网
我试图隐藏或显示基于我引入的数据中是否存在JSON密钥的HTML元素.如果密钥存在,我想显示我正在放置该对象的元素ID.如果密钥不存在,我想隐藏相同的元素ID.我正在使用React并且不确定它是否属于componentDidMount或常规函数.我是新手,所以如果我不小心遗漏了重要的代码或写了蹩脚的东西,我很抱歉.
我的componentDidMount代码:
componentDidMount = () => {
// Need to hide an the HTML element if the json key doesn't exist in the object
//check the JSON object for the key "workExamples"
if (typeof props.workItemData.workExamples === "undefined") {
console.log("it did not find the json key");
// Change element styling to hidden
document.getElementById("work-examples").style.visibility = "hidden";
} else {
return;
}
};
我的HTML:
<span id="work-examples" className="work-examples">
<a href={props.workItemData.workExamples}>Work Examples</a>
</span>
我假设我不需要发布我的JSON对象.我有一些;只有一个有workExamples键.我正在使用.map()列出对象.
使用上面的代码,它不会将列表中的元素隐藏到没有密钥的JSON对象中.希望这一切都有意义.任何帮助表示赞赏.
解决方法:
正如卢克在评论中指出的那样,
the logic for whether or not to render should live in
render
这方面的力学已经被其他答案所覆盖,所以我不会全部考虑.
其他几点:
您正在尝试使用箭头函数来定义标准的React函数componentDidMount,并且基于快速本地测试,我不认为React可以理解这一点.看起来你没有从传统的componentDidMount(){/ * do stuff here * /}语法中获得任何特别的好处,所以我会切换到后者.
您正在尝试检查您的JSON是否包含密钥
typeof props.workItemData.workExamples === "undefined"
但我认为不需要这种类型;你可以直接检查密钥的存在:
if(props.workItemData.workExamples) { /* do stuff */ }
最后,在你的HTML中,该行
<a href={props.workItemData.workExamples}>Work Examples</a>
试图用JavaScript中的值(花括号中的东西)设置href的值.这对于JSX是有效的,这是有意义的,因为你使用的是React,但不是纯HTML.但是由于页面正在加载并且没有正确处理逻辑的某个部分,我假设你只是在JSX(一个something.js文件)中的类似HTML的东西,而不是字面上的HTML文件.
标签:show-hide,javascript,json,reactjs 来源: https://codeday.me/bug/20190731/1587344.html