Javascript ReactKonva不支持类型“0”；分区；

我需要用

ReactKonva

画一个圆圈，并在鼠标悬停在上面时显示工具提示。在

React

中，我们需要从

render

方法返回一个元素，因此我试图将tooltip和

ReactKonva

元素包装在

div

-标记中，但它在呈现页面时给我一个错误：

未捕获错误：ReactKonva不支持类型“div”

以下是我的代码：

render() {
return (
  <div>
    <Circle
      x={this.props.x}
      y={this.props.y}
      radius={5}
      fill={this.props.color}
      shadowBlur={5}
      onClick={this.handleClick}
      onMouseOver={this.showTooltip}
      onMouseOut={this.hideTooltip}
    />

  <div style={{ height: 120 visibility: this.state.visibility }}>
        <Popover
            id="popover-basic"
            placement="right"
            positionLeft={200}
            positionTop={50}
            title="Popover right"
        >
        Some data is here
      </Popover>
    </div>
  </div>
);
}

render（）{
返回(
这里有一些数据
);
}

我该怎么做才能让它工作？我有一个想法，用所有

div

标记替换

层

，但我不确定

更新

---

如果我们消除了所有的

div

标记，并将

Circle

和

Popover

作为一个数组返回，由于

Popover

的存在，我们仍然会得到相同的错误。

我能够使它工作，但不是我真正想要的方式。基本上，我只是在两个级别上传递事件，其中未使用

ReactKonva

framework，在那里我显示了popover

在

ColoredCircle.jsx

中：

<Circle
      x={this.props.x}
      y={this.props.y}
      radius={5}
      fill={this.props.color}
      shadowBlur={5}
      onClick={this.handleClick}
-----> onMouseOver={this.props.mouseOverHandler}
-----> onMouseOut={this.props.mouseOutHandler}
    />

<Stage width={window.innerWidth} height={window.innerHeight}>
    <Layer offsetX={offsetX} offsetY={offsetY}>
      {data.map((neuronArr, idx) => {
          const numOfPoints = neuronArr[0].length;
          const circleColor = cssColors[idx];
          return [...Array(numOfPoints)].map((_, pointIdx) => {
            const factor = 50;
            const x = factor*neuronArr[0][pointIdx];
            const y = -factor*neuronArr[1][pointIdx];
            const key = idx + " " + pointIdx;
            return <ColoredCircle key={key} x={x} y={y} color={circleColor}
------>         mouseOverHandler=
                      {this.props.handleCircleMouseOver} 
------>         mouseOutHandler=
                      {this.props.handleCircleMouseOut}/>
        })
      })}
    </Layer>
  </Stage>

然后，在

ExpressionGraph

的父级中，我正在处理事件：

  <ExpressionGraph handleCircleMouseOver={this.handleCircleMouseOver}
          handleCircleMouseOut={this.handleCircleMouseOut}/>