0

我是新来的反应。所以请原谅我的幼稚。我有以下一段反应代码：

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"));

请帮我。

4

2 回答 2

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;
于 2020-02-13T12:28:34.173 回答
0

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

只是一个旁注。这讨论了为什么不应该在 useEffect 挂钩中更新状态的原因。

您希望在组件加载时创建一次 Line 吗？

另一个注意事项。您提到的“以下代码”不使用类。

*编辑
这是一个基本的反应实现，但是，由于您使用 antv/g2plot.Line 我无法让它更新图形而不将其覆盖在旧图形之上。快速浏览一下文档，我建议将其更改为图表。

于 2020-02-12T14:02:22.213 回答