javascript 结合反应和玉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29396843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Combining react and jade
提问by johnnyutah
I am working on an isomorphic javascript app with express + react. We started out using jade for server side templates for static content, but combining the two is quickly becoming unwieldy. We have ended up with something like this:
我正在开发一个带有 express + react 的同构 javascript 应用程序。我们开始使用 jade 作为静态内容的服务器端模板，但将两者结合起来很快变得笨拙。我们最终得到了这样的结果：
In the express routes:
在快速路线中：
router.get("/", function(req, res) {
var webpackStats = require('../../config/webpack-stats.json');
var reactHtml = React.renderToString(HiwApp({}));
var slideshowHtml = React.renderToString(slideshowApp({}));
var config = {
webpackStats: webpackStats,
reactOutput: reactHtml,
slideshowHtml: slideshowHtml
};
res.render("how_it_works/howitworks", config);
});
In Jade:
在玉：
body
.company-logo.center
#react-main-mount
!= reactOutput
include ./content_block_1.jade
include ./content_block_2.jade
#slideshow-main-mount
!= slideshowHtml
This is very brittle-if we want jsx then a jade template then more jsx, we have to make sure we get the order right.
这是非常脆弱的——如果我们想要 jsx 然后是一个 jade 模板然后更多的 jsx，我们必须确保我们得到正确的顺序。
My idea is to do it allwith jsx. I know there is React.renderToStaticMarkup for this sort of thing, but that doesn't solve the problem of mixing dynamic with static pages.
我的想法是用 jsx来做这一切。我知道有 React.renderToStaticMarkup 来处理这类事情，但这并不能解决将动态页面与静态页面混合的问题。
The big questions: if we decide to do all of this with jsx (say layout.jsx which contains all components), then call React.renderToString(App({});, will this be a major performance hit? If so, is there a better way to do it to easily combine static and dynamic blocks?
最大的问题是：如果我们决定用 jsx（比如包含所有组件的 layout.jsx）来做这一切，然后调用React.renderToString(App({});，这会不会对性能造成重大影响？如果是这样，是否有更好的方法来轻松组合静态和动态块？
回答by AndrewMcLagan
Although this may be a tiny bit off topic: We stuck with jade templates.
尽管这可能有点偏离主题：我们坚持使用玉石模板。
Basically we wanted the flexibility to use a non-react + flux architecture for areas of the site when and if that need arose. Our site is basically made up of a number of smaller SP apps: Site, UserAccount, Team and Admin.
基本上，我们希望在需要时能够灵活地为站点区域使用非反应 + 通量架构。我们的网站基本上由许多较小的 SP 应用程序组成：Site、UserAccount、Team 和 Admin。
Why did we do this?
我们为什么这样做？
Smaller filesize and overhead for users who are not accessing all sections of the site.
Option to "opt out" of React and flux if and when the need arises.
Simpler, server side authentication.
对于未访问站点所有部分的用户，文件大小和开销较小。
如果需要，可以选择“退出”React 和flux。
更简单的服务器端身份验证。
回答by rickard
The way we have done it successfully was to render a JSX shell template (Html.jsx) on the server using React.renderToStaticMarkup()and then send it as the response to every server-side express route request that is meant to deliver some HTML to the browser. Html.jsxis just a shell containing html head information and GA scripts etc. It should contain no layout.
我们成功的方法是Html.jsx在服务器上使用渲染 JSX shell 模板 ( ) React.renderToStaticMarkup()，然后将其作为响应发送到每个服务器端快速路由请求，该请求旨在将一些 HTML 传递给浏览器。Html.jsx只是一个包含 html 头信息和 GA 脚本等的外壳。它不应该包含任何布局。
// Html.jsx
render(){
return (
<html>
<head>
// etc.
</head>
<body>
<div
id="app"
dangerouslySetInnerHTML={{__html: this.props.markup}}>
</div>
</body>
<script dangerouslySetInnerHTML={{__html: this.props.state}</script>
<script>
// GA Scripts etc.
</script>
</html>
)
}
Remember it is totally fine and even recommended to use dangerouslySetInnerHTMLon the server when hydrating your app.
请记住，它完全没问题，甚至建议dangerouslySetInnerHTML在为您的应用程序补水时在服务器上使用。
Dynamic layout should be done with your your isomorphic components through a hierarchy of components based on their state/props configuration. If you happen to be using React Router, then your router will render view handlers based on the routes you provide it so that means you don't need to manage that yourself.
动态布局应该通过基于它们的状态/道具配置的组件层次结构来完成你的同构组件。如果您碰巧使用 React Router，那么您的路由器将根据您提供的路由呈现视图处理程序，这意味着您不需要自己管理它。
The reason we use this technique is to architecturally separate our "App" which is isomorphic and responds to state from our server-side template shell which is just a delivery mechanism and is effectively boiler plate. We even keep the Html.jsxtemplate amongst all the express components within our app and do not let it mix with the other isomorphic React components.
我们使用这种技术的原因是在架构上将我们的同构并响应状态的“应用程序”与我们的服务器端模板外壳分开，它只是一种传递机制，实际上是样板。我们甚至将Html.jsx模板保留在我们应用程序中的所有 express 组件中，并且不让它与其他同构的 React 组件混合。
One of the most helpful resources I found for working out React/isomorphic architecture was https://github.com/yahoo/flux-examples/tree/master/react-routerwhich is where we stole this technique from.
我发现用于制定 React/同构架构的最有用的资源之一是 https://github.com/yahoo/flux-examples/tree/master/react-router，我们从这里窃取了这项技术。
We explored the idea of integrating handlebars as a templating engine for client's devs using our products in the future but decided that it was less complex to write our own DSL in JSX and use some simple parsing routines to parse our HTML-like DSL to JSX by adding things like export default(ES6 module syntax) at the start of the template and then import the template to a rendering component.
我们探索了将把手集成为模板引擎的想法，供将来使用我们产品的客户开发人员使用，但决定在 JSX 中编写我们自己的 DSL 并使用一些简单的解析例程将我们的类 HTML DSL 解析为 JSX 并不复杂export default在模板的开头添加（ES6 模块语法）之类的内容，然后将模板导入渲染组件。
You could of course follow that line of thought and use a jade compiler to spit out the template and then add module syntax around that if you think separate jade files are essential. I also noticed this project as well although I have not explored it in anger: https://github.com/jadejs/react-jade.
如果您认为单独的 jade 文件必不可少，您当然可以遵循该思路并使用 jade 编译器来生成模板，然后围绕该模板添加模块语法。我也注意到了这个项目，虽然我没有生气地探索它：https: //github.com/jadejs/react-jade。
