Реакция сервера на HTML - PullRequest
Новая
       39

Реакция сервера на HTML

0 голосов
/ 27 июня 2019

Как настроить сервер узла для размещения компонентов / шаблонов React и вывода HTML в виде строки после передачи в реквизитах?

Концепция: 

const React = require('react');
const { renderToStaticMarkup } = require('react-dom/server');

const sayHello = props => (
   return renderToStaticMarkup(<p>Hello, {props.name}!</p>);
)

module.exports = sayHello;

Это кажется самым простым делом, но в NodeJS очень мало документации для этой работы. Я пробовал много разных плагинов webpack / babel и ошибок узлов, как только вы пишете jsx, то есть: <p>Hello...</p>.

1 Ответ

0 голосов
/ 27 июня 2019 
import jsx from '../src/app';
import { renderToString } from "react-dom/server";


function template(reactDom) {
    return `
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>React App</title>

        </head>

        <body>
            <div id="app">${reactDom}</div>

            <script src="/app.bundle.js"></script>
         </body>
        </html>
    `;
}

app.get("*", function (req, res, next) {
    const reactDom = renderToString(jsx);
    res.writeHead(200, { "Content-Type": "text/html" });
    res.end(template(reactDom));
});

jsx - это файл приложения, а не файл index.js, index.js содержит ReactDom.render, что не является обязательным.

renderToString

стоит взглянуть на Next.js

...