ReactKonva does not support the type "div"

I need to draw a circle with ReactKonva and show a tooltip upon hovering over it. In React we need to return one element from render method, so I am trying to wrap both the tooltip and ReactKonva element inside a div - tag but it is giving me an error upon rendering the page:

Uncaught Error: ReactKonva does not support the type "div"

Here is the code that I have:

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

What could I do to make it working? I have an idea of substituting all div tags for Layer but I am not sure.

Update

If we eliminate all div tags and return Circle and Popover as an array, we still get the same error due to Popover presence.

1 answer

  • answered 2018-01-11 21:15 Nikita Vlasenko

    I was able to make it working, but not the way I actually wanted to. Basically I am just passing events two levels up where ReactKonva framework is not used and there I am showing the popover.

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

    Then, inside its parent 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>
    

    Then, in the parent of ExpressionGraph I am handling the events:

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