如何通过服务器端渲染将数据从 Node 传递到 React-component答案

【问题标题】：How to pass data with server-side rendering to React-component from Node如何通过服务器端渲染将数据从 Node 传递到 React-component
【发布时间】：2016-11-13 10:06:29
【问题描述】：

我正在尝试将一些数据传递给我的组件。我找到了这个例子：http://www.tech-dojo.org/#!/articles/56b1af3e8ff769fc29f96ae8 我创建了一个类 DataWrapper，如下所示：

import React, { Component } from 'react'

export default class DataWrapper extends Component {

  constructor(props) {
    super(props)
  }

  getChildContext () {
    return {
      data: this.props.data
    };
  }

  render () {
    return this.props.children;
  }
}

DataWrapper.childContextTypes = {
  data: React.PropTypes.oneOfType([
    React.PropTypes.object,
    React.PropTypes.string
  ]).isRequired
};

节点服务器：

app.get('*', (req, res) => {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
      ...
      const body = renderToString(
        <MuiThemeProvider muiTheme={theme}>
          <DataWrapper data={'somedata'}>
            <RouterContext {...renderProps} />
          </DataWrapper>
        </MuiThemeProvider>
      )
      res.render('index', { title, body })

我想要使用数据的组件如下所示：

export default class Template extends Component {

  constructor(props, context) {
    super(props, context)
    console.log("Template context", context.data);
    ...

context.data 始终未定义。我错过了什么？还有其他方法可以做到这一点吗？

【问题讨论】：

标签： node.js reactjs react-router

【解决方案1】：

If contextTypes is not defined, then context will be an empty object.，直接引用自 React Docs。 https://facebook.github.io/react/docs/context.html#how-to-use-context

你需要添加

Template.contextTypes = {
    data: // whatever type it is
}

【讨论】：

谢谢！我错过了。