javascript - 在 reactjs 应用程序中使用 dom-to-image 模块是否正确？

Question

我正在使用 reactjs 开发自定义组件。我想添加一个功能来将组件导出为图像和 PDF。在 React 中使用 dom-to-image 模块是否正确？因为它与真实 DOM 一起工作并与虚拟 DOM 一起工作，我不知道可能存在一些冲突或一些性能问题。如果有错，请给我解决方案。

Answer 1

您可以使用 refs引用 react dom 元素，然后将 dom 元素解析为 dom-to-html 函数

示例:

class MyComponent extends React.Component {
    constructor(props) {
       super(props);
       this.myRef = React.createRef();
    }
    render() {
       return <div ref={this.myRef} />;
    }
}

并访问元素

JS 方式:let node = document.getElementByID('some-id')

react 方式:let node = this.myRef.current

现在将节点传递给 dom-to-image 函数，就像在其文档中一样。

PS:将 ref 设置为某个状态/存储变量以在应用程序的任何位置访问它。