React Vis MarkSeries выдает x функция не определена ошибка

Question

кто-нибудь использовал react-vis? Я пытаюсь визуализировать метки над рядами линий, когда пользователь наводит курсор на график.

Проблема в том, что он продолжает выдавать ошибку

x не является функцией.

Кто-нибудь сталкивался с такой проблемой? ошибка возникает, когда я пытаюсь отобразить метки или показать всплывающую подсказку над рядом строк.

Вот моя функция рендеринга

<XYPlot
  onMouseLeave={this.handleMouseOver}
  handleMouseOver={this.handleMouseOver}
  xAxis={{
    tickValue: xAxis,
    tickFormat: this.formatXAxisTick,
    timeUnit: TIMEUNIT[chartHorizontalUnit]
  }}
  yAxis={{
    tickValue: yAxisLabelArray,
    tickFormat: value => `${value} ${chartVerticalUnit}`
  }}
>
  {lineList.map((line, index) => (
    <LineSeries
      key={index}
      {...line.toJS()}
      curve="curveMonotoneX"
      selected={
        isNull(selectedLegendValue) || line.get("label") === selectedLegendValue
      }
      {...(line.get("data").size === 1 ? { sizeDomain: [] } : null)}
      onNearestX={(datapoint, { index, event, innerX }) =>
        this.handleMouseOver(datapoint, event, innerX)
      }
    />
  ))}

  {toolTipValue && toolTipValue.size && (
    <>
      {toolTipValue.map((lineData, i) => (
        <MarkSeries
          key={`mark-${i}`}
          color={lineData.get("label")}
          stroke="white"
          strokeWidth={2}
          data={[
            {
              x: lineData.get("x"),
              y: lineData.get("y")
            }
          ]}
        />
      ))}
    </>
  )}
</XYPlot>;

XYPlot - это оболочка для реагирования на XYPlot. XAxis и YAxis. Кто-нибудь еще сталкивался с такой проблемой?

Вот скриншот ошибки

Answer 1

Так что я смог понять, что здесь происходит не так. Вы не можете обернуть реагирующий компонент внутри оболочки. Если мы действительно хотим обернуть его в оболочку, то нам придется вызывать оболочку как функцию.

Использование React.Fragment · Выпуск № 1095 · Uber / Reaction-vis