使用 React 服务器端渲染传递道具

Question

当从 Node (express) 服务器端渲染时，我无法将初始 props 传递给我的 React 组件

这是我的组件的简短版本：

/* mycomponent.jsx */
import React, {PropTypes, Component} from 'react/addons'
import GoogleMap from 'google-map-react'
import Place from './place.jsx'

export default class EventsMapPage extends Component {

  static defaultProps = {
    center: [59.838043, 30.337157]
  }

  constructor (props) {
    super(props)
  }

  render () {
    const locations = this.props.locations
      .map(place => {
        const {id, ...coords} = place

        return (
          <Place
            key={id}
            {...coords}
            text={id}
          />
        )
      })

    return (
       <div className='map-canvas'>
         <GoogleMap
          center={this.props.center}
         >
          {locations}
        </GoogleMap>
      </div>
    )
  }
}

这是服务器端

/* app.js */
require('babel/register')({ stage: 0 })

var ejs = require('ejs')
var express = require('express')
var venues = require('./venues')
var React = require('react/addons')
var MyComponent = require('./src/js/components/mycomponent.jsx')

var Component = React.createFactory(MyComponent)

var app = express()

app.get('/locations/:id', function (req, res, next) {
  var loc = venues[req.params.id]

  return res.render('location', {
    react: React.renderToString(Component({locations: [loc]}))
  })
})


app.listen(process.env.port || 2000)

在 render() 方法中尝试使用 locations 属性时似乎没有将其传递给组件

有什么想法吗？

Answer 1

您在“GoogleMaps”组件中添加您的位置时出现拼写错误。

{locatios}