React Universal pass data to component

Question

Привет, я новичок в реагировании. Я пытаюсь передать данные от сервера к клиенту с помощью универсального рендеринга React. Но сейчас мне повезло. Тем не менее, я могу оказать HTML, но я не в состоянии получить доступ к данным через this.props.data

Вот мой код

// server.js

app.get('*', (req, res) => { 
    match({ 
    routes: (<Router>{routes}</Router>), 
    location: req.url 
    }, 
    (err, redirect, renderProps) => { 
     if (err) { 
     return res.status(500).send(err.message); 
     } else if (redirect) { 
     return res.redirect(302, redirect.pathnam + redirect.search); 
     } else if (renderProps.components.some(component => component === NotFoundPage)) { 
     res.status(404); 
     } 

     let data = [ 
     { 
      title: 'Godfather' 
     }, 
     { 
      title: 'Godfather 2' 
     } 
     ]; 

     data = JSON.stringify(data); 
     const renderedApp = renderToString(
     <DataWrapper data={data}> 
      <RouterContext {...renderProps} /> 
     </DataWrapper> 
    ); 

     res.render('index.ejs', { 
     renderedApp 
     }); 
    }); 
}); 

// routes.js

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 
import HomePage from './components/routes/HomePage'; 
import MovieDetailsPage from './components/routes/MovieDetailsPage'; 
import NotFoundPage from './components/routes/NotFoundPage'; 
import App from './components/app'; 

export { 
    NotFoundPage 
}; 

export default (
    <Route path="/"> 
    <IndexRoute component={HomePage} /> 
    <Route path="movie" component={MovieDetailsPage} /> 
    <Route path="*" component={NotFoundPage} /> 
    </Route> 
); 

// client.js

import 'babel-polyfill'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, browserHistory } from 'react-router'; 
import routes from './routes'; 
import DataWrapper from '../src/DataWrapper'; 

let data = []; 

ReactDOM.render(
    <DataWrapper data={data}> 
    <Router history={browserHistory} routes={routes} onUpdate={window.scrollTo(0, 0)}/> 
    </DataWrapper>, 
    document.getElementById('app') 
); 

// DataWrapper

import React, { Component } from 'react'; 

class DataWrapper extends Component { 
    getChildContext() { 
    return { 
     data: this.props.data 
    }; 
    } 

    render() { 
    return this.props.children; 
    } 
} 

DataWrapper.childContextTypes = { 
    data: React.PropTypes.oneOfType([ 
    React.PropTypes.object, 
    React.PropTypes.array 
    ]).isRequired 
}; 

export default DataWrapper; 

// HomePage.js, где я хочу, чтобы получить доступ к данным в this.props.data

import React, { Component } from 'react'; 

export default class HomePage extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      data: this.props.data 
     }; 
    } 

    render() { 
     return (
      <div> 
       <h1>{this.state.data}</h1> 
      </div> 
     ); 
    } 
} 

Может кто-то пожалуйста, мне точку в правильном направлении, и объяснить, если это возможно, что Я делаю неправильно

Спасибо

Answer 1

вы в настоящее время рендеринга детей в DataWrapper, но вы не передаете в реквизита.

Не уверен, что это оптимальный способ сделать это, но вот как я получаю реквизита и состояние прошло в

{this.props.children && React.cloneElement(this.props.children, { 
    state: this.state 
})}