Возникли проблемы при преобразовании цельного кода в jsx

Question

Я новичок, чтобы реагировать. Прошу прощения за мою наивность. У меня есть следующий фрагмент кода реакции:

import { Line } from '@antv/g2plot';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const linePlot = new Line(document.getElementById('container'), {
  title: {
    visible: true,
    text: 'DEF',
  },
  description: {
    visible: true,
    text: 'ABC',
  },
  padding: 'auto',
  forceFit: true,
  data,
  xField: 'year',
  yField: 'value',
  smooth: true,
});

linePlot.render();

Мне нужно преобразовать указанный выше фрагмент кода внутри класса и экспортировать его: я написал следующий код

import React, { useEffect } from "react";
import { Line } from "
@antv
/g2plot";
export const YourComponentName = function() {
const [linePlot, setlinePlot] = useState(initialState);
const data = [
{ year: "1991", value: 3 },
{ year: "1992", value: 4 },
{ year: "1993", value: 3.5 },
{ year: "1994", value: 5 },
{ year: "1995", value: 4.9 },
{ year: "1996", value: 6 },
{ year: "1997", value: 7 },
{ year: "1998", value: 9 },
{ year: "1999", value: 13 }
];
useEffect(() => {
setlinePlot(
new Line(document.getElementById("container"), {
title: {
visible: true,
text: "DEF"
},
description: {
visible: true,
text: "ABC"
},
padding: "auto",
forceFit: true,
data,
xField: "year",
yField: "value",
smooth: true
})
);
return () => {
// you can clanup here
};
}, [linePlot]);
return; //jsx from here with state which you want to render.
};

Однако, поскольку , это контейнерный класс, я не хочу "document..getElementById (" container ")" в моем классе этого компонента. Мой индекс. js уже имеет

ReactDOM.render(<Main />, document.getElementById("container"));

Пожалуйста, помогите мне.

Answer 1

Я получил ответ от другой платформы сообщества реакции. Вставляю сюда, если кто-то сталкивается с подобной проблемой:

import ReactDOM from "react-dom";
import React from "react";

import { Line } from "@antv/g2plot";
import ReactG2Plot from "react-g2plot";


class SampleReact extends React.Component {
  render() {
    const data = [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 }
      ];
      const config = {
        title: {
          visible: true,
          text: "曲线折线图"
        },
        description: {
          visible: true,
          text: "用平滑的曲线代替折线。"
        },
        padding: "auto",
        forceFit: true,
        data,
        xField: "year",
        yField: "value",
        smooth: true
      };
    return (
        <ReactG2Plot Ctor={Line} config={config} />

    );
  }
}
export default SampleReact;

Answer 2

В React вы можете использовать как функциональный компонент, так и компонент на основе классов. Вы использовали хуки реагирования useState и useEffect, которые предназначены только для функциональных компонентов и не могут использоваться в подходе на основе классов.

Просто примечание. В этом говорится о причинах, по которым вам не следует обновлять состояние внутри ловушки useEffect.

Хотите ли вы, чтобы линия создавалась один раз при загрузке компонента?

Другой нота. Упомянутый ниже код не использует классы.

* Редактировать Здесь - базовая c реализация реакции, однако, из-за того, что вы используете antv / g2plot.Line, я не могу заставить его обновить график, не наложив его поверх старого. Из быстрого просмотра документов я бы порекомендовал изменить его на диаграмму.