Создать HTML из компонента React, включая стиль

У меня есть простой компонент реакции, в котором с помощью ref я получаю div, но мне нужно сгенерировать html, который также включает стили. Таким образом, я могу передать этот HTML-код на внутренний сервер создания PDF-файлов.

pdfRef(elem){
        console.log(elem);
//<div><span>dataPDF</span> </div>

    }

    render() {

        return (
            <div ref={(elem) => this.pdfRef(elem)} className="SomeCssClass">
                <span >dataPDF</span>
            </div>
        );
    }
}

[Редактировать]

Когда я пытаюсь распечатать div через ref, элементы печатаются с именем класса. Но когда я отправляю эту строку в службу pdf, поскольку отправляется только элемент html и имя класса без фактического css, pdf создается без стиля.

есть ли способ сгенерировать html с помощью css в виде строки, чтобы в дальнейшем его можно было отправить в службу pdf. Надеюсь, вопрос ясен. Есть указатели?


reactjs ref
person BharathyKannan    schedule 28.05.2019    source источник
comment
Я не уверен, что вы ищете, можете быть немного точнее?   -  person Marko Savic    schedule 28.05.2019

Ответы (1)


arrow_upward
-2
arrow_downward

Сценарий server.js в react-dom позволяет визуализировать компонент React в статическую строку HTML. Вы можете потребовать это в своем коде, например:

const ReactDOMServer = require('react-dom/server');

Или используя синтаксис ES6:

import ReactDomServer from 'react-dom/server'

После этого вы можете преобразовать свой компонент в строку HTML с помощью функций ReactDomServer.renderToString или ReactDomServer.renderToStaticMarkup следующим образом:

const htmlStr = ReactDomServer.renderToStaticMarkup(<MyComponent prop1={'value1'} />);

Это выглядит почти так же, как ReactDom.render, за исключением того, что ему не нужен второй параметр узла dom для рендеринга, и возвращается строка html. Кроме того, этот метод можно использовать как на стороне клиента, так и на стороне сервера. Для вашего случая использования generate-pdf достаточно renderToStaticMarkup. При необходимости проверьте документацию по следующей ссылке, чтобы увидеть тонкие различия между двумя упомянутыми выше методами: https://reactjs.org/docs/react-dom-server.html

person d_shiv    schedule 28.05.2019