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
}

如何将服务器端呈现的数据传递给Node中的React-component

1 个答案: