nodejs+react动态调用jsx

最新推荐文章于 2025-03-12 11:58:48 发布

slwsss

最新推荐文章于 2025-03-12 11:58:48 发布

阅读量1.1k

点赞数

本文链接：https://blog.youkuaiyun.com/slwsss/article/details/98384981

版权

js|css 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用React和ReactDOMServer进行服务端渲染的方法，通过创建一个简单的React组件并将其渲染为HTML字符串，展示了如何利用Babel转换JSX语法，以及如何通过Node.js将渲染后的组件流式传输到客户端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var React = require("react");
var ReactDOMServer = require("react-dom/server");
var jsx = `<div>
    <a href={this.props.href}>{this.props.text}</a>
    <div dangerouslySetInnerHTML={{ __html: JSON.stringify(this.props, null, 4) }}></div>
    {
        this.props.list.map(p => {
            return (<p>{p}</p>)
        })
    }
</div>`;
var getElement = (t) => new Function('React', 'return ' + require("babel-core").transform(jsx, {
    plugins: ["babel-plugin-transform-react-jsx"]
}).code).call(t, React);

http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    ReactDOMServer.renderToNodeStream(getElement({ props: { href: "/", text: "qwer", list: [1, 3, 5, 7] } })).pipe(res);
}).listen(port);