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

Question

我正在尝试将一些数据传递给我的组件。 我找到了以下示例： 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始终是未定义的。 我想念什么？ 还有其他方法吗？

Answer 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
}