时间戳

首页 > 解决方案 > 有没有办法强制渲染 React 组件？

javascript - 有没有办法强制渲染 React 组件？

问题描述

在 React 应用程序中，我想将 DOM 树渲染到画布或 PDF。

DOM 树不是活动组件，而是在路由内函数内的变量中可用。

例如：

import React from 'react';
import axios from 'axios';

function Summary(props) {

  function SaveForm(){
    const obj = <div>I am what is saved</div>
    const obj_as_blob = ...code to save obj as canvas/pdf/blob...
    axios.post('/save',obj_as_blob)
      .then((resp)=>{console.log(resp)})
  }

  return (
    <div>
      <p>I am what the user sees</p>
      <button onClick={SaveForm}>Send File to backend</button>
    </div>
  )
}

我发现的许多库（例如html2canvas）仅允许对附加到当前文档的元素进行强制访问，诸如react-pdf之类的替代方法需要对其组件的有限使用，并且不允许我在渲染步骤中使用我的组件。

最终的意图是将其obj作为呈现的 blob 并将其发送到后端服务器进行保存。然后在以后将其提供给用户。

非常感谢您对此的任何帮助。

标签： javascriptreactjs

解决方案

在您捕获 jsx 元素之前，我有一个想法，您将放置在活动组件中的锚点，然后在将快照发送到后端时卸载它：

function Summary(props) {

  const yourAnchor = React.useRef();


  function save() {
    const obj = <div>I am what is saved</div>;

    ReactDOM.render(obj, yourAnchor.target, () => {
      // your jsx finally attached to the document
      const obj_as_blob = ...code to save obj as canvas/pdf/blob...

      axios.post('/save',obj_as_blob)
       .finally(() => {
         // Unmount the node
         ReactDOM.unmountComponentAtNode(yourAnchor.current);
       })
    });
  }

  return (
    <div>
      <div ref={yourAnchor} />
      <p>I am what the user sees</p>
      <button onClick={save}>Send File to backend</button>
    </div>
  )
}

推荐阅读