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

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

0 голосов
/ 28 мая 2019

У меня есть простой компонент реагирования, в котором с помощью 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>
        );
    }
}

[Edit]

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

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

1 Ответ

0 голосов
/ 28 мая 2019

Сценарий server.js вact-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

...