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

Question

我是个新手。所以请原谅我的天真。我有下面这段react代码：

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 ")“。我的index.js已经有了

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

请帮帮我。

Answer 1

我从其他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;

Answer 2

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

这只是个附注。This谈到了为什么不应该在useEffect钩子中更新状态的原因。

是否要在加载组件时创建一次直线？

另一个音符。你提到的“下面的代码”没有使用类的。

*编辑

Here是一个基本的react实现，但是，由于您使用的是antv/g2plot.Line，我无法让它在不覆盖旧图形的情况下更新图形。快速浏览一下文档，我建议将其更改为Chart。