1

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)

locationsrender() メソッドで使用しようとすると、prop がコンポーネントに渡されていないようです。

何か案が ？

4

1 に答える 1

-1

「GoogleMaps」コンポーネントに場所を追加するタイプミスがあります。

{locatios}
于 2015-08-13T11:06:23.440 に答える