передача реквизита с рендерингом на стороне сервера React

У меня возникают проблемы с передачей исходных реквизитов моему компоненту React при рендеринге со стороны сервера Node (express)

Вот краткая версия моего компонента:

/* 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)

Кажется, что locations prop не передается компоненту при попытке использовать его в методе render()

Есть идеи ?


person Michael    schedule 13.08.2015    source источник


Ответы (1)


В компоненте «GoogleMaps» есть опечатка.

{locatios}
person Vallerious    schedule 13.08.2015
comment
да, опечатки не было в исходном коде, так что проблема не в этом, но спасибо, что заметили! - person Michael; 13.08.2015