将一段代码转换为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.
};

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

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

请帮帮我。

Answer 1

在React中，您可以有一个功能组件或一个基于类的组件。您已经使用了reactuseState和useffect挂钩，它们仅用于功能组件，不能用于基于类的方法。

只是旁注。本文讨论了为什么不应该更新useffect钩子中的状态。

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

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

*编辑
这里是一个基本的反应实现，但是，由于你使用的是antv/g2plot。行我不能让它更新图表而不覆盖在旧的上面。通过快速浏览文档，我建议将其更改为图表。

Answer 2

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

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;