时间戳

首页 > 解决方案 > H.ui.Control 与 React

here-api - H.ui.Control 与 React

问题描述

我正在寻找使用 H.ui.Control 添加一个反应元素。这可能吗？怎么做？

// sudo code of what I did
componentDidMount() {
  ...
  let button = new H.ui.Control(this.myButtonControl);
  button.setPosition('top-left');
  this._ui.addControl('button-control', button);
  ...
}

myButtonControl() {
  return <button className="H_btn">Hello World</button>
}

一个新的<div class="H_ctl"></div>, 出现在控件应该在的位置，但不是按钮。

标签： here-api

解决方案

虽然这不是我想要做的，但我确实找到了解决方案。我创建了一个扩展的泛型类H.ui.Control，在本例中为 ButtonGroupControl。

class ButtonGroupControl extends H.ui.Control {
  constructor(buttons: []) {
    super();
    this._buttons = buttons;
    this.addClass('H_grp');
  }

  renderInternal(el, doc) {
    this._buttons.forEach((button, i) => {
      let btn = doc.createElement('button');
      btn.className = 'H_btn';
      btn.innerText = this._buttons[i].label;
      btn.onclick = this._buttons[i].callback;
      el.appendChild(btn);
    })
    super.renderInternal(el, doc);
  }
}

export default ButtonGroupControl;

然后，在我的地图组件中，我创建了传递给控件的项目数组，如下所示：

const mapToolsControl: ButtonGroupControl = new ButtonGroupControl([
    {
        label: 'Add Field',
        callback: () => {
          console.log('callback: adding field');
        }
    },
    {
        label: 'Remove Field',
        callback: () => {
          console.log('callback: remove field');
        }
    }
]);

最后，我将控件添加到地图中，例如：

this._map.addControl('map-tools-control', mapToolsControl);

这导致以下结果（这是一个链接，因为我还没有足够的点来嵌入）： 结果的屏幕截图

推荐阅读