时间戳

首页 > 解决方案 > 有没有办法在快速服务器中呈现 .jsx 组件

javascript - 有没有办法在快速服务器中呈现 .jsx 组件

问题描述

我对将快速路由与 React 和 .jsx 文件混合感到非常困惑。我正在尝试使用 mongoose 数据库构建一个多页网站，并且我一直在使用 ejs 来完成它。现在我正在尝试转换为 React，但尽管我研究了 3 天，但我完全不知道如何做到这一点。我想做的大致是这样的（示例是一个反应组件“example.jsx”）

app.get("/",function(req,res){ res.send(<example />)})

代替

app.get("/",function(req,res){ res.send("another.ejs") })

如果我不能做这样的事情，你会推荐 React routs 还是坚持使用 ejs。

标签： javascriptreactjsjsx

解决方案

您需要 ( 1. ) 将 JSX 代码转换为 Javascript，然后 ( 2. ) 将 Javascript 呈现为 HTML 字符串，然后您可以将其发送给客户端。

例如，如果您有文件example.js：

console.log('jsxData:', <example />);
// app.get("/",function(req,res){ res.send(<example />)})

1. 将 JSX 转译为 Javascript

如果一个 Javascript 文件包含 JSX 代码，它就变成了一个 JSX 文件，Javascript 不能再理解它了。扩展名 .js 或 .jsx 在这里无关紧要。如果您愿意，您可以将其重命名为 ，也可以不重命名example.jsx。

但是您可以使用babel将该 JSX 文件转换（又名“transpile”）为 Javascript 文件。您将获得一个新的、单独的文件，它是一个有效的 Javascript 文件。

1.a. 如果尚未安装，则需要安装 babel 和 JSX 转译器（这里我使用yarn的安装，npm也可以）：

yarn add @babel/cli @babel/core @babel/preset-react --dev

1.b。将 JSX 文件转换为 Javascript：

yarn babel example.js --presets=@babel/preset-react --out-dir dist

现在您应该有了新文件/dist/example.js，它是一个有效的 Javascript 文件（但仍然不是 HTML 文件）。（此文件的扩展名将是.js，无论原始源文件是.js还是.jsx。）

2. 渲染 HTML

在第 1 步中，您已将原始文件中的 JSX 代码转译为转译文件<example />中的 Javascript 代码React.createElement("example", null)，但这仍然不是 HTML，这是一个 Javascript“React 元素”。

您可以使用ReactDOMServer将此 React 元素呈现为 HTML：

2.a. 如果尚未安装，请安装react并react-dom：

yarn add react react-dom

2.b。导入reactand react-dom/server，并使用该renderToString()方法将 React 元素呈现为 HTML 字符串：

const React = require('react'); // <-- React is required, because it is used in the transpiled .js file.
const ReactDOMServer = require('react-dom/server');

const jsxData = <example />;
const htmlString = ReactDOMServer.renderToString( jsxData );

console.log('htmlString:', htmlString);
// app.get("/",function(req,res){ res.send( htmlString )})

像以前一样再次编译这个 JSX 文件。现在里面应该包含你可以发送给客户端的HTML字符串./dist/example.js。htmlString在这个例子中，如果你运行 egnode ./dist/example.js你应该看到控制台输出：

htmlString: <example data-reactroot=""></example>

推荐阅读