Javascript 将下面的react代码转换为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 from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Line } from '@antv/g2plot';

class plotreact extends React.Component {
    render() {
      return React.createElement(Line, {
        title: {
          visible: true,
          text: 'DEF',
        },
        description: {
          visible: true,
          text: 'ABC',
        },
        padding: 'auto',
        forceFit: true,
        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 },
          ],
        xField: 'year',
        yField: 'value',
        smooth: true,
      });
    }
  }

  export default plotreact;

但是，我收到TypeError:无法设置未定义的属性“\u events” 我怎么能在课堂上写呢。

---

请帮帮我。

起初，我以为您混淆了如何使用React.createElement，但从根本上说，我不认为这是您的问题。问题在于，Line不是一个可以创建元素并向其传递道具的react组件。相反，您需要创建一个容器，然后将打印线渲染到其中

下面是一个示例组件，它获取一些数据并返回用于打印渲染的容器。它使用两个生命周期函数来处理数据更新和绘图创建。componentDidUpdate允许我们发出副作用，以响应react state或props更新，在本例中，更新渲染线图

class PlotReact extends Component {
  // Set all line plot settings in state
  state = {
    title: {
      visible: true,
      text: "DEF"
    },
    description: {
      visible: true,
      text: "ABC"
    },
    padding: "auto",
    forceFit: true,
    data: [], // <-- define default empty data array!
    xField: "year",
    yField: "value",
    smooth: true
  };

  componentDidMount() {
    // populate state data, this could be passed via prop, fetched, etc...
    this.setState({ data: plotData });
  }

  componentDidUpdate() {
    // state (or props) updated, recompute line and render it
    const linePlot = new Line(document.getElementById("container"), this.state);

    linePlot.render();
  }

  render() {
    // return a container for the line plot to be rendered into
    return <div id="container" />;
  }
}

如果我有一个建议/调整，那就是移动状态逻辑，即绘图配置、设置、数据等。。将它们作为道具公开给父组件。该组件简化为：

情节反应

一些家长

---

这允许您使用不同的打印设置，在组件生命周期期间更改它们，并使用不同的设置进行多个实例化。换句话说，它现在是可重用的，因为渲染逻辑与用例分离。

我不明白。你的JSX最终应该是什么样子？嗨@aaaidan…我已经编辑了我的问题。希望你们现在能理解。请回答，如果你能帮助回答的话。你好@Ramesh…我想渲染lineplot…但在类内…我编辑了问题…希望你现在能理解。请更新问题，使其更具体，使用类和react代码。你好@Drewerese，已编辑了问题。希望现在更清楚了。非常感谢你帮助我

class PlotReact extends Component {
  componentDidMount() {
    this.renderPlot();
  }

  componentDidUpdate() {
    this.renderPlot();
  }

  renderPlot() {
    const linePlot = new Line(
      document.getElementById("plot-container"),
      this.props // <-- just getting from props now!
    );

    linePlot.render();
  }

  render() {
    return <div id="plot-container" />;
  }
}

export default function App() {
  const plotConfig = {
    title: {
      visible: true,
      text: "DEF"
    },
    description: {
      visible: true,
      text: "ABC"
    },
    padding: "auto",
    forceFit: true,
    xField: "year",
    yField: "value",
    smooth: true
  };

  // ... some function to fetch/populate plotData

  return (
    <div className="App">
      <PlotReact {...plotConfig} data={plotData}/>
    </div>
  );
}