Javascript 将一段代码转换为jsx时出现问题

我是新来的。所以请原谅我的天真。我有以下代码：

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

但是，因为这是一个容器类，所以我不希望在我的this组件类中使用“document..getElementById（“容器”）。我的index.js已经有了

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

ReactDOM.render（，document.getElementById（“容器”）；

---

请帮助我。

在React中，您可以使用功能组件或基于类的组件。 您已经使用了react

useState

和

useffect

挂钩，它们仅用于功能组件，不能用于基于类的方法

只是旁注。讨论不应更新useEffect挂钩内状态的原因

是否希望在加载构件时创建一次线

另一张纸条。您提到的“下面的代码”不使用类的

*编辑

---

是一个基本的react实现，但是，由于您使用antv/g2plot.Line，我无法让它更新图形，而不将其覆盖在旧的图形上。通过快速查看文档，我建议将其更改为图表。

我从其他react社区平台获得了答案。如果有人面临类似问题，我会将其粘贴到此处：

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;

从“react-dom”导入ReactDOM；
从“React”导入React；
从“@antv/g2plot”导入{Line}”；
从“react-g2plot”导入ReactG2Plot；
类SampleReact扩展了React.Component{
render（）{
常数数据=[
{年份：“1991年”，价值：3}，
{年份：“1992年”，价值：4}，
{年份：“1993年”，价值：3.5}，
{年份：“1994年”，价值：5}，
{年份：“1995年”，价值：4.9}，
{年份：“1996年”，价值：6}，
{年份：“1997年”，价值：7}，
{年份：“1998年”，价值：9}，
{年份：“1999年”，价值：13}
];
常量配置={
标题：{
可见：对，
文本：“曲线折线图"
},
说明：{
可见：对，
文本：“用平滑的曲线代替折线。"
},
填充：“自动”，
forceFit：对，
数据，
“年”，
“价值”，
顺利：是的
};
返回(
);
}
}
导出默认采样器；

你能解释一下你想与众不同的地方吗？@Jakub我想把第一部分写的代码转换成组件类谢谢你的建议。你能帮我写第一部分代码的组件类吗？你想改变数据并且显示的图形会更新吗？我可以试着得到一个basic实现正在进行，但是，我不确定您将其移动到react组件的总体目标是什么。感谢@Jacob对我的帮助。我从其他react社区得到了答案。无论如何，谢谢。