H.ui.Retrol与React

Question

我想用H.ui.Control添加一个react元素。这可能吗？怎么可能呢？

// 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>，出现在控制器所在的位置，但不是按钮。

Answer 1

虽然这不是我想要做的，但我确实找到了解决方案。我创建了一个扩展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);

这导致以下（这是一个链接因为我还没有足够的嵌入点）：Screenshot of Result

Answer 2

这是我做的（向地图添加两个按钮）

var U_I = new H.ui.UI(map);

var container = new H.ui.Control();
container.addClass('here-ctrl here-ctrl-group');

var button = new H.ui.base.Element('button', 'here-ctrl-icon map_control');
container.addChild(button);
button.addEventListener('click', function() { alert(1); });

var button = new H.ui.base.Element('button', 'here-ctrl-icon map_center');
container.addChild(button);
button.addEventListener('click', function() { alert(2); });

container.setAlignment('top-right');

U_I.addControl('myControls', container );
U_I.addControl('ScaleBar', new H.ui.ScaleBar() );

渲染是由css（这是一个提取）

button.here-ctrl-icon {
    width: 25px;
    height: 25px;
    margin: 2px 0 0 2px;
}

.map_control { background: url("images/map_control.png") no-repeat scroll 0 0 transparent; }
.map_center  { background: url("images/map_center.png")  no-repeat scroll 0 0 transparent; }

• H.ui.base.Button();没有工作......它创造了一个div
• 无法通过api向button添加属性，例如alt或title。
• 我仍然需要处理addEventListener ...（不工作！）

结果 ：

my new nice controls