关于reactjs：React Meteor打开图标签

React Meteor open graph tags

如何使用流星和react / react-router从服务器端渲染开放图标记？

我不知道如何在流星和react-router上使用react-helmet。

Thx

编辑：

我用react构建了一个流星应用程序。结构如下：

client / main.js
client / main.html --->我在div id上渲染应用程序：并获得了基本的html标记，例如head

imports / startup / client / routes.jsx --->使用react-router

的路由逻辑

类似于：

1
2
3
4
5
6
7
8

const myRoutes = (
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Redirect from='*' to='/404' />
</Route>
</Router>
);

及更高版本：

1	ReactDOM.render(routes, document.getElementById('app'));

(其中app是我的html文件上的div ID)

...

server / main.js

...

(非常简化)

所以...我不明白反应头盔文档上的服务器部分。

" ...作为字符串输出"？
" ...作为React组件"？

我必须从服务器端"重新渲染" HTML文件吗？
我的意思是...在文档中，服务器看起来像html标记结构一样返回了一个变量...
对我来说还不清楚，我也不知道这是否是我的正确方法。

编辑：
这篇文章帮助我解决了我的问题：
https://labs.redantler.com/meteor-react-ssr-52284322c2f1#.m9i4d0pal

相关讨论

在客户端，当您渲染React组件时，您有一个DOM，并且为每个组件(及其组成部分)创建了DOM节点/元素。

1	ReactDOM.render(<App />, document.getElementById('root'))

虽然不是必需的，但服务器端呈现的目的是在HTML响应中发送页面的标记。这对于不让JavaScript在其浏览器中运行的人以及为您的内容建立索引的漫游器(至少是那些不会运行JavaScript的漫游器)很有用。

现在，在服务器上，没有DOM，因此，当呈现React组件的初始标记时，可以使用renderToString方法将它们呈现为字符串。

1
2
3

import { renderToString } from"react-dom/server"

const markup = renderToString(<App />)

然后将该标记插入要发送给用户的HTML中。

1
2
3
4
5
6
7
8
9
10
11

const html = `
<!doctype html>
<html>
<head></head>
<body>
${html}
<script src="/static/bundle.js">
</body>
</html>`

res.send(html);

现在，react-helmet的意思是说，在将React应用程序呈现为字符串之后，您调用rewind方法来获取由<Helmet>组件呈现的各种<head>值。

1	const head = Helmet.rewind()

然后，您可以将所需的值插入到html模板中，它们将包含在发送给用户的HTML中。由于开放图标记是元标记，因此它们将包含在head变量的meta属性中。

1
2
3
4
5
6
7
8
9
10
11

const html = `
<!doctype html>
<html>
<head>
${head.meta.toString()}
</head>
<body>
${html}
<script src="/static/bundle.js">
</body>
</html>`