Блог

Главная - Вопросы по программированию - инициализировать компонент react с помощью реквизитов и возвращать в виде html-строки

инициализировать компонент react с помощью реквизитов и возвращать в виде html-строки

#reactjs

#reactjs

Вопрос:

Требование заключается в том, что мне нужно инициализировать компонент react без обновления DOM

 print() {
  let toPrint = ReactDOMServer.renderToString(<ComponentToPrint0 />); // Returns string
  toPrint  = ReactDOMServer.renderToString(<ComponentToPrint1 />);
  printHandler(toPrint);
}

printHandler(htmlElement) {
    let tempWindow = window.open();
    tempWindow.document.write('<html><head><title>Print</title>');
    tempWindow.document.write('<link rel="stylesheet" href="http://localhost:9595/app/main.css" type="text/css" />');
    tempWindow.document.write('</head><body>');
    tempWindow.document.write(htmlElement);
    tempWindow.document.write('</body></html>');
    tempWindow.focus();
    tempWindow.print();
    tempWindow.close();
}

В приведенных выше ComponentToPrint0 и ComponentToPrint1 возвращают в виде строки, это лучший подход или какой-либо другой есть??

Комментарии:

1. Чего вы пытаетесь достичь? В React вы должны работать только с React и JSX, а не с DOM или HTML.

2. Если вы ожидаете, что <ComponentToPrint0 /> компоненты будут статической разметкой, тогда проверьте это stackblitz.com/edit/react-uogn1a и ‘<ComponentToPrint0 />’ вернет просто <ComponentToPrint0 />

3. @Jayavel обновил запрос, пожалуйста, проверьте

4. @VladimirSerykh я нахожусь на другом маршруте, где ComponentToPrint0 не было в DOM, когда я нажимаю на кнопку печати, мне нужно распечатать счет-фактуру с ComponentToPrint0 в качестве заголовка. Я достиг этого с помощью ReactDOMServer.renderToString(<ComponentToPrint0 />).

Ответ №1:

Его можно обрабатывать как любое другое приложение React:

 const Popup = () => <>
  <head>
    <title>Print</title>
    <link rel="stylesheet" href="http://localhost:9595/app/main.css" type="text/css" />
  </head>
  <body>
    <ComponentToPrint0 />
    <ComponentToPrint1 />
  </body>
</>;

...

let tempWindow = window.open();
ReactDOM.render(<Popup/>, tempWindow.document.documentElement);
tempWindow.focus();
tempWindow.print();
tempWindow.close();