Question

我正在尝试隐藏或显示基于我引入的数据中是否存在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对象中。希望这一切都有意义。任何帮助表示赞赏。

Answer 1

卢克在评论中指出，

是否呈现的逻辑应该存在于render
中

此处的力学已经被其他答案所覆盖，所以我不会全力以赴。

其他几点：

您尝试使用箭头功能来定义标准的React函数componentDidMount，并且基于快速的本地测试，我不认为React可以理解这一点。与传统的componentDidMount() { /* do stuff here */ }语法相比，它看起来并没有从中获得任何特别的好处，所以我转而使用后者。

您正在尝试检查您的JSON是否包含

的密钥

typeof props.workItemData.workExamples === "undefined"

但我不认为需要typeof;您可以直接检查是否存在密钥：

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

Answer 2

你发布的代码没有任何意义。你应该阅读React及其工作原理。您永远不需要DOM-select-by-ID由React组件内的React组件呈现的HTML元素。相反，您只需让React组件的渲染函数检查条件，然后相应地渲染HTML。

除了实际上这里，你甚至不这样做，因为如果你按照我认为你的方式使用地图（你没有发布你的数据，所以很难说），那么你可以只是为数组中的每个项生成一个HTML元素。因此，如果它不在数组中，则不会映射（）。

render() {
    let workItems = this.props.workItemData ? this.props.workItemData.map((item) =>
        <span id={Object.keys(item)[0]} className={Object.keys(item)[0]}>
            <a href={item[Object.keys(item)[0]]}>{Object.keys(item)[0]}</a>
        </span>
    ) : '';

    return (
        <div>
         {workItems}
        </div>
    );

Answer 3

如果你只是拿着道具并可能输出它，你可以保持简单，只需在变量中命名你需要的东西。

render() {
  let conditionalElement = null;
  if(props.workItemData.workExamples) {
    conditionalElement = (
      <span id="work-examples" className="work-examples">
        <a href={props.workItemData.workExamples}>Work Examples</a>
      </span>
    );
  }
  return (
    <div>
      {conditionalElement}
    </div>
  );
}

这将允许你有一个null值，如果需要可以注入JSX（不会产生任何东西），然后检查prop是否存在，然后用你的JSX替换null值。 / p>

另外，是的，请使用标准的componentDidMount（）{}函数语法，而typeof则是不必要的。

Answer 4

试试这个

render(){
   return props.workItemData.workExamples && (
      <span id="work-examples" className="work-examples"> 
        <a href={props.workItemData.workExamples}>Work Examples</a>
      </span>)
}

Answer 5

在创建任何相应的组件之前，我会删除没有键的对象。类似的东西：

render() {
  return (
    <div>
      {
        Object.keys(workItems)
        .filter(item => item.workExamples)
        .map(item => <YourComponent {...item} />)
      }
    </div>
  )
}

Answer 6

在React中，我想在映射后仅显示现有元素，因此在列表元素中添加了CSS逻辑：

 render() {
  return (
    <div>
      {
        data.map ((item) => {
        return (<div>

    <li>{item.answer1}</li>
    <li>{item.answer2}</li>
    <li>{item.answer3}</li>
    <li style = {{display: item.answer4 ? 'block' : 'none'}}> 
     {item.answer4}</li>
    <li style = {{display: item.answer5 ? 'block' : 'none'}}> 
     {item.answer5}</li>
    <li style = {{display: item.answer6 ? 'block' : 'none'}}> 
      {item.answer6}</li>

）） } ） }

如果React中不存在JSON密钥，如何隐藏HTML元素

6 个答案: