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文件.