Javascript react pdf-错误：目标容器不是DOM元素

我正在使用React with并尝试将PDF呈现到我的模式中。但是，我的模式会在点击按钮时加载，因此不会在应用程序加载时加载。但它试图在应用程序加载时调用PDF呈现调用，从而生成错误：“错误：目标容器不是DOM元素”。我不知道如何解决这个问题

这是我的整个模态组件：

import ReactModal from 'react-modal';
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ReactPDF, { PDFViewer } from '@react-pdf/renderer';
import CloseButton from './CloseButton';
import MessageHub from '../message/MessageHub';
import PDFPlacard from '../placards/PDFPlacard';

const PDF = () => (
    <PDFViewer>
        <PDFPlacard />
    </PDFViewer>
);

const PlacardsModal = (props) => {
    const { openPlacards, setOpenPlacards, customStyles } = props;
    const numPlacards = React.createRef();

    const ref = useRef(null);

    // this call needs to happen after the modal and #PDFPlacard is rendered
    ReactDOM.render(<PDF />, document.getElementById('PDFPlacard'));

    const handleSubmit = (evt) => {
        evt.preventDefault();
        if (numPlacards.current.value === '') {
            ref.current('Please fill in the number of placards.');
        } else {
            // submit form
        }
    };

    return (
        <ReactModal
            isOpen={openPlacards}
            style={customStyles}
            className={'print-placards-modal'}
            closeTimeoutMS={1000}
        >
            <CloseButton setOpenModal={setOpenPlacards} />
            <h2>Print Placards</h2>
            {/* eslint-disable-next-line react/no-children-prop */}
            <MessageHub children={(add) => (ref.current = add)} />
            <form className={'form'} onSubmit={handleSubmit}>
                <div className={'form-group row'}>
                    <label
                        htmlFor={'numPlacards'}
                        className={'col-sm-6 col-form-label'}
                    >
                        Number of Placards:
                    </label>
                    <div className={'col-sm-6'}>
                        <input
                            id={'numPlacards'}
                            type={'number'}
                            className={'form-control'}
                            ref={numPlacards}
                        />
                    </div>
                </div>
                <button
                    className={'btn btn-primary d-block mx-auto mb-2'}
                    type={'submit'}
                    value={'Print'}
                />
            </form>
            <div id={'PDFPlacard'} />
        </ReactModal>
    );
};

PlacardsModal.propTypes = {
    openPlacards: PropTypes.bool,
    setOpenPlacards: PropTypes.func,
    customStyles: PropTypes.object,
    title: PropTypes.string
};

export default PlacardsModal;

从“反应模式”导入反应模式；
从“React”导入React，{useffect，useRef}；
从“react dom”导入react dom；
从“道具类型”导入道具类型；
从'@react pdf/renderer'导入ReactPDF，{PDFViewer}；
从“./CloseButton”导入CloseButton；
从“../message/MessageHub”导入MessageHub；
从“../plactards/PDFPlacard”导入PDFPlacard；
常量PDF=（）=>(
);
const placadsmodal=（道具）=>{
const{openPlacards，setOpenPlacards，customStyles}=props；
const numPlacards=React.createRef（）；
const ref=useRef（null）；
//此调用需要在呈现modal和#PDFPlacard之后进行
ReactDOM.render（，document.getElementById（'PDFPlacard'）；
常量handleSubmit=（evt）=>{
evt.preventDefault（）；
如果（numPlacards.current.value==''）{
参考当前版本（“请填写标语牌数量”）；
}否则{
//提交表格
}
};
返回(
印刷标语
{/*eslint禁用下一行反应/无子项属性*/}
（ref.current=add）}/>
标语牌数量：
);
};
PlacardsModal.propTypes={
OpenPlacts:PropTypes.bool，
setOpenPlacards:PropTypes.func，
customStyles:PropTypes.object，
标题：PropTypes.string
};
导出默认标语牌；

以下是PDFPlacard.js：

import React from 'react';
import {
    Page,
    Text,
    View,
    Document,
    StyleSheet
} from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
});

// Create Document Component
const PDFPlacard = (type) => (
    <Document>
        <Page size="letter" style={styles.page}>
            <View style={styles.section}>
                <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
                <Text>Section #2</Text>
            </View>
        </Page>
    </Document>
);

export default PDFPlacard;

从“React”导入React；
进口{
页
文本，
看法
文件，
样式表
}来自“@react pdf/renderer”；
//创建样式
const styles=StyleSheet.create({
第页：{
flexDirection:'行'，
背景颜色：“#e4”
},
第节：{
差额：10，
填充：10，
flexGrow:1
}
});
//创建文档组件
常量PDFPlacard=（类型）=>(
第1节
第2节
);
导出默认PDFPlacard；

还有我的index.js：

import React from 'react';
import { render } from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min';
import './index.css';
import App from './App';

const title = 'title';

render(<App title={title} />, document.getElementById('root'));

// eslint-disable-next-line no-undef
module.hot.accept();

从“React”导入React；
从'react dom'导入{render}；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入'bootstrap/dist/js/bootstrap.min'；
导入“./index.css”；
从“./App”导入应用程序；
常量标题='title'；
render（，document.getElementById（'root'））；
//eslint禁用下一行无未定义
module.hot.accept（）；

家长正在加载标语牌，如下所示：

...
<button
  className={'btn btn-info mb-3'}
  onClick={() => setOpenPlacards(true)}
>
  Placards
</button>
...
<PlacardsModal
  openPlacards={openPlacards}
  setOpenPlacards={setOpenPlacards}
  customStyles={customStyles}
/>

。。。
SetOpenPlacts（正确）}
>
标语牌
...

终于从另一个来源得到了答案。我根本不应该进行

ReactDOM.render（

调用。我应该在我的页面上包含PDF组件。 像这样：

...
                <button
                    className={'btn btn-primary d-block mx-auto mb-2'}
                    type={'submit'}
                    value={'Print'}
                />
            </form>
            <!-- not this -->
            <div id={'PDFPlacard'} />
            <!-- this -->
            <PDF />
        </ReactModal>
    );
};
...

。。。
);
};
...

您可以添加

的代码吗？您还可以共享index.html文件吗？