React，javascript对象，如果存在键值，则呈现元素答案

【问题标题】：React, javascript object, if key value exists render an elementReact，javascript对象，如果存在键值，则呈现元素
【发布时间】：2017-08-23 06:26:33
【问题描述】：

如何检查 javascript 对象项是否有键，如果存在则渲染元素。

这是我的 javascript 对象，然后对其进行解析，并将每个 item 制成一个引导列表项。在items.title = Groups 下，还有一个附加键"dropdown": "true"，这是我要为其创建下拉菜单的元素。

var linksNav = {
    items: [
        {
            "type": "heading",
            "title": "News",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "People",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "Events",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "Groups",
            "href": "#",
            "target": "_self",
            "dropdown": "true"
        },
        {
            "type": "heading",
            "title": "Capabilities",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "Initiatives",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "Who we are",
            "href": "#",
            "target": "_blank"
        },
    ]
}

这是我的代码（不起作用），如果该菜单项存在该键，则尝试有条件地呈现下拉列表（<NavSub /> 标记）。我得到的结果是我的每个列表项的下拉菜单是<div>Nothing</div>。其他一切都正常显示，所以我认为我的条件语句有问题。

render: function() {
  let dropdownMenu;        
  if (this.props.dropdown=="true") {
    dropdownMenu = (<Navsub />)
  } else {
     dropdownMenu = (<div>Nothing</div>)
  }
  return (
    <li className={this.props.title + ' nav-items'}>
      <a href={this.props.href} target={this.props.target} className={this.state.color + ' dropdown-toggle'} onClick={this.onClick} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{this.props.title}</a>

      //I want to conditionall render this dropdown menu
      <ul className="dropdown-menu fade">
        {dropdownMenu}
      </ul>

    </li>
  );
}

【问题讨论】：

“那行不通” 究竟什么行不通？你有错误吗？还是不是您期望的输出？如果是这样，你得到了什么，你期望什么？
“什么都没有显示” 您在示例中创建的所有元素都不可见（例如链接）？或者你的意思是只有<ul className="dropdown-menu fade"> 元素是空的？如果你真的没有得到任何输出，你会得到错误吗？如果是，错误是什么？请阅读How to Ask 和minimal reproducible example。
已编辑。不是我预期的输出，但我又是新手。
@Snorlax 发布问题时，请关注实际与预期的行为和错误消息I expected the screen to display A,B,C but it displays DEF instead (or I get a JS error: "blah blah blah")
您在组件中收到什么作为道具。能否在渲染中使用 console.log(this.props) 并分享结果

标签： javascript html twitter-bootstrap reactjs

【解决方案1】：

如果你的道具中可能没有“下拉菜单”，你应该使用 JavaScript 的in operator。另外，请避免使用==，因为静默类型转换会导致奇怪的结果。

if ('dropdown' in this.props && this.props.dropdown === 'true') {
  //show dropdown
} else {
  //don't show dropdown
}

之前的 sn-p 之所以有效，是因为 JavaScript 的 if short-circuits。

话虽如此，鉴于您在每个下拉列表中都获得了一个包含 Nothing 的 div，您的组件很可能没有收到他们应该收到的道具。您应该检查每个组件获得的道具。

【讨论】：

你不能用if(this.props.dropdown)吗？如果它不存在，则评估为undefined，这是错误的。
嗯，是的，但是他们使用的是字符串，这让我觉得this.props.dropdown 可能有除true、false 以外的值或不存在，所以这是最可靠的方法。
如果this.props.dropdown 永远不能是true、false 以外的其他东西或不存在，那么您的方式会更好，但在这种情况下，无论如何他们都应该使用布尔值。
很公平，这绝对是确保确定性的更好方法。

【解决方案2】：

对于您的情况，这种方法可能矫枉过正，但以下方法适用于您的情况：

if ((this.props.dropdown) && this.props.dropdown === "true"){
  dropdownMenu = <Navsub />;
} else {
  dropdownMenu = <div>Nothing</div>
}

另一种方法检查对象dropdown上的属性dropdown存在，您可以将Object#hasOwnProperty与在您的条件下的快捷方式&& 二元运算符：

// the condition will only check if dropdown is true if it exists on this.props
if (this.props.hasOwnProperty('dropdown') && this.props.dropdown === "true") {
  dropdownMenu = <Navsub />;
} else {
  dropdownMenu = <div>Nothing</div>
}

Object#hasOwnProperty 在您想要确保该属性存在于对象上即使在以下情况下其值为null 或undefined。

【讨论】：