Парсинг C++ для генерации тупиков модульного теста

Эта конкретная библиотека работает особым образом (похоже, она делает много «волшебства» под капотом - вам следует взглянуть на исходный код здесь , более конкретно на папку рендерера внутри src) [115 ]

Сохранение холста в состоянии внутри массива (правильный способ реагирования на действия) будет проблемой, поскольку он сохраняет его как сложный объект со многими методами и т. Д. ... и мы не можем визуализировать объекты. . Эта библиотека не была написана с учетом React ...

Пример кода ниже представляет собой простую реализацию в React ...

Вот живая демонстрация: https://codesandbox.io/s/9y24vwn1py

import React, { Component } from 'react';
import html2canvas from 'html2canvas';

class App extends Component {
  constructor(props) {
    super(props);
    this.captureRef = React.createRef();
    this.displayRef = React.createRef();
  }

  getScreenshotHandler = () => {
    html2canvas(this.captureRef.current).then(canvas =>
      this.displayRef.current.appendChild(canvas),
    );
  };

  render() {
    return (
      

        

          
This enitre div will be captured and added to the screen
        
        Get Screenshot!
        

          
Your screenshots will be availbale below
          

        
      
    );
  }
}

export default App;

РЕДАКТИРОВАТЬ: на основе комментария ниже приведен еще один обходной путь:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { canvasArray: [] };
    this.captureRef = React.createRef();
  }

  getScreenshotHandler = () => {
    html2canvas(this.captureRef.current).then(canvas =>
      this.setState({
        canvasArray: [canvas.toDataURL(), ...this.state.canvasArray],
      }),
    );
  };

  renderCanvas = () => {
    return this.state.canvasArray.map((canvas, i) => {
      return ;
    });
  };

  render() {
    return (
      

        

          
This enitre div will be captured
        
        Get Screenshot!
        

          
Your screenshots will be availbale below:
          {this.renderCanvas()}
        
      
    );
  }
}

Ссылка на демонстрационный ролик: https://codesandbox.io/s/1r213057vq