Question

如何检查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>
  );
}

Answer 1

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

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

之前的代码段有效，因为JavaScript是if short-circuits。

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

Answer 2

对于您的情况，此方法可能 overkill ，以下情况适用于您的情况：

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

用于检查对象dropdown上的属性this.props 是否存在 的

替代方法，您可以使用在您的条件中使用快捷方式&&二元运算符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 。

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

2 个答案: