react map数组循环嵌套，获取每级属性 和 防止事件冒泡

循环数组，显示和获取属性，并 阻止事件冒泡

![Alt]

html：

      <div className="leaseBox test-1">
                            <ul className="lease_build">
                                {this.state.buildList.map((i, index) => {
                                    return (
                                      <li className={"lease_buildList  buildLi" + index} onClick={this.clickBuild.bind(this, i.id, i.code, index, i.child)} >
                                            <img className="iconBuild shouqi" src="./wisdomPark/image/arrow.png" />
                                            <img src="./wisdomPark/image/iconBuild.png" />
                                          {i.name}
                                        <ul className="lease_floorList floorBox"  >
                                        {i.child.map((item, index) => {
                                            return (
                                              <li className={"floorLi" + index} onClick={this.floorClick} data-value={index} data-id={item.id}>
                                                      <img className="iconFloor shouqi" src="./wisdomPark/image/arrow.png" />
                                                      <img src="./wisdomPark/image/iconFloor.png" />
                                                {item.name}
                                                <ul className="roomList">
                                                      {item.child.map((it, index) => {
                                                        return (
                                                          <li onClick={this.clickRoom} data-id={it.id}> <img src="./wisdomPark/image/iconRoom.png" />{it.name} </li>
                                                        )
                                                      })}
                                                    </ul>
                                                  </li>
                                                    )
                                          })}
                                          </ul>
                                        </li>
                                    )
                                })}
                            </ul>
                        </div>

react：

    // 点击 建筑 i.id, i.code, index, i.child
  public clickBuild(id, code, index, child) {
     console.info('clickBuild: ', id);
    buildIndex = index;
        if ($(".lease_buildList").eq(index).children(".iconBuild").is('.zhankai')) {
          $(".lease_buildList").eq(index).children(".iconBuild").removeClass('zhankai').addClass('shouqi');
          $("." + "buildLi" + index).children("ul").hide();
        } else {
           $(".lease_buildList").eq(index).children(".iconBuild").removeClass('shouqi').addClass('zhankai');
           $(".lease_buildList").eq(index).siblings().children(".iconBuild").removeClass('zhankai').addClass('shouqi');
           $("." + "buildLi" + index).children("ul").show();
          $("." + "buildLi" + index).siblings().children("ul").hide();
           this.initRightFloor(child);
        }
        //over
    }

  public floorClick = (e) => {
    e.stopPropagation();
    // console.info('handleClickTestBox3: ', e);
    console.info('floorClick: ', e.target.dataset.id);
    var floorIndex = Number(e.target.dataset.value);
    if ($("." + "buildLi" + buildIndex).children("ul").children(("." + "floorLi" + floorIndex)).children(".iconFloor").is('.shouqi')){
      $("." + "buildLi" + buildIndex).children("ul").children(("." + "floorLi" + floorIndex)).children(".iconFloor").removeClass('shouqi').addClass('zhankai');
      $("." + "buildLi" + buildIndex).children("ul").children(("." + "floorLi" + floorIndex)).children("ul").show();
    } else {
      $("." + "buildLi" + buildIndex).children("ul").children(("." + "floorLi" + floorIndex)).children(".iconFloor").removeClass('zhankai').addClass('shouqi');
      $("." + "buildLi" + buildIndex).children("ul").children(("." + "floorLi" + floorIndex)).children("ul").hide();
    }
  }


  public clickRoom= (e) => {
    console.info('clickRoom: ', e.target.dataset.id);
    e.stopPropagation();
  }