时间戳

首页 > 解决方案 > Express React Views - 如何手动渲染

javascript - Express React Views - 如何手动渲染

问题描述

https://github.com/reactjs/express-react-views

我想使用这样的东西来呈现一些 html，但我根本没有在“网络服务器”的上下文中呈现我的 html——我根本不想将它连接到快速服务器。

我定期运行一些节点代码，应该将 html 输出到文件，所以我真正想要的是我可以调用这样的函数：

const html = renderTemplate({userName: 'George'});

它将userName作为 React 道具传递给我设置的任何 express-react-view React 组件，并将 html 返回给我。

但是所有的示例和指南都展示了如何在 express.js 中将 express-react-views 设置为渲染引擎，而不仅仅是如果你想要一个独立的函数来渲染 html。

我也可以完全使用不同的包，这将允许我使用 React jsx 模板并将它们呈现为 html，而无需浏览器的上下文。

标签： javascriptnode.jsreactjs

解决方案

我找到了答案

https://reactjs.org/docs/react-dom-server.html

https://medium.com/@remarkablemark/passing-props-in-a-universal-react-web-app-c52aca48c36b

npm 要求：

npm install react react-dom
npm install @babel/core @babel/register
npm install --save-dev @babel/preset-react

这是我的主节点文件，entry.js

require("@babel/register")({
    presets: ["@babel/preset-react"]
});

const Index = require('./views/index.jsx');
var ReactDOMServer = require('react-dom/server');
var React = require('react');


var html = ReactDOMServer.renderToStaticMarkup(
    React.createElement(Index, {title:'title'})
);

然后，在/views/index.jsx：

var React = require('react');
var PropTypes = require('prop-types');

function countTo(n) {
    var a = [];
    for (var i = 0; i < n; i++) {
        a.push(i + 1);
    }
    return a.join(', ');
}

class Index extends React.Component {
    render() {
        return (
            <body>
                <h1>{this.props.title}</h1>
                <p>Welcome to {this.props.title}</p>
                <p>
                    I can count to 10:
                    {countTo(10)}
                </p>
            </body>
        );
    }
}

Index.propTypes = {
    title: PropTypes.string,
};

module.exports = Index;

推荐阅读