преобразовать следующий фрагмент кода реакции в 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 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: Невозможно установить свойство '_events' из неопределенного" Как я могу написать его в классе. Пожалуйста, помогите мне.

Answer 1

Сначала я подумал, что вы путаетесь с использованием React.createElement, но, по сути, я не думаю, что это ваша проблема. Возникает проблема, что Line не является компонентом реакции, для которого вы можете создать элемент из и pass props. Вместо этого вам нужно создать контейнер, в который вы можете затем визуализировать линию графика.

Вот пример компонента, который получает некоторые данные и возвращает контейнер для визуализации графика. Он использует несколько функций жизненного цикла для обновления данных и создания графиков. componentDidUpdate позволяет нам выдавать «побочные эффекты» в ответ на состояние реакции или обновление реквизита, в этом случае обновляя визуализированный линейный сюжет.

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" />;
  }
}

Если бы у меня было одно предложение / настройка, было бы переместить логи "state" c (т.е. график, настройки, данные и т. Д. c ..) в родительский компонент и просто выставить их как реквизит. Компонент упрощается до:

PlotReact

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" />;
  }
}

Some Parent

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

Это позволяет использовать различные настройте параметры графика, измените их в течение жизненного цикла компонента и создайте несколько экземпляров с различными настройками. Другими словами, теперь его можно использовать повторно, поскольку логи рендеринга c отделены от вариантов использования.