Question

我需要用ReactKonva绘制一个圆圈，并在悬停在它上方时显示工具提示。在React中，我们需要从render方法返回一个元素，因此我尝试将工具提示和ReactKonva元素都包含在div - 标记内但是它给了我渲染页面时出错：

未捕获错误：ReactKonva不支持类型＆＃34; div＆＃34;

以下是我的代码：

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>
);
}

我能做些什么才能让它发挥作用？我想知道将所有div代码替换为Layer，但我不确定。

更新

如果我们删除所有div代码并将Circle和Popover作为数组返回，我们仍会因Popover存在而获得相同的错误。

Answer 1

我能够使它工作，但不是我真正想要的方式。基本上我只是在没有使用ReactKonva框架的情况下将事件传递到两个级别，并且我正在显示弹出窗口。

在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}
    />

然后，在其父ExpressionGraph.jsx内：

<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}/>

ReactKonva不支持＆＃34; div＆＃34;

1 个答案: