У меня возникают проблемы с передачей исходных реквизитов моему компоненту 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()
Есть идеи ?