gibi sunucu tarafında onları işlenmiş zaman verilerle bileşenlerini görüntülemeyi nasıl

Question

Ben bileşenlerini tepki verileri geçmek mümkün fasulye ettik:

app.get('/', function (req, res, next) { 
    var reactHtml = ReactDOMServer.renderToString(component({data})); 
    res.render('index.jade', {reactOutput: reactHtml}); 
}); 

Şimdi ettik değişimi t bu için

server.js:

app.get('*', (req, res) => { 
    // match the routes to the url 
    match({ routes: routes, location: req.url }, (err, redirect, props) => { 
     props.data = {q:123}; 
     const appHtml = ReactDOMServer.renderToString(routerContext(props)); 
     res.render('index.jade', {reactOutput: appHtml}); 
    }) 
}); 

yönlendirici bağlam

module.exports = React.createClass({ 
    render: function(){return(<RouterContext {...this.props} />)} 
}); 

ve güzergahları

module.exports = (
    <Route path="/" component={App} {...this.props}> 
     <IndexRoute component={List}/> 
     <Route path="/about" component={About}/> 
    </Route> 
); 

App.jsx

var App = React.createClass({ 
    render: function() { 
     console.log(this.props); 
     return (
      <div id="app-root" className="container"> 
       <Nav/> 
       <h1>{this.props.q}</h1> 
       {this.props.children} 
       <div className="Row"> 
        <div className="footer col-lg-12"></div> 
       </div> 
      </div> 
     ) 
    } 

}); 

Yani örneğin benim App bileşeninde bu noktada props.data = {q:123}; veri olsun istiyorum ama App bileşeninde console.log(this.data); yaptığınızda yöntemi işlemek ben Tarih, yer ve vb. var, ama verilerim değil. {q:123} verilerini server.js mantığından (Uygulama veya Liste veya Hakkında) provaya geçirmek için herhangi bir yol var mı?

Sen serileştirip initialState olarak kök bileşene bu adımı geçerseniz, örneğin hale sunucuda sayfaya eklemeniz gerekir

Answer 1

. Eğer match geçmesi için geri arama işlevi

argümanları şunlardır:

1. hatası: bir hata meydana gelmesi halinde bir JavaScript hata nesnesi, undefined aksi.
2. redirectLocation: yol yönlendirme ise bir Location amacı, undefined aksi

3. renderProps: yol eşleşmeliydi sahne aksi takdirde, yönlendirme bağlama undefined geçmesi gerekir.

   Her üç parametrenin de undefined olması durumunda, bu, verilen konumla eşleşen bir yol bulunmadığı anlamına gelir.

size işlemek için geçirilen tüm bileşenlerini gösterir burada

match({ routes: routes, location: req.url }, (err, redirect, props) => { 
     console.dir(props); 
     const appHtml = ReactDOMServer.renderToString(routerContext(props)); 
     res.render('index.jade', {reactOutput: appHtml}); 
    }) 
}); 

Ve console.dir(props.components) console.dir ekleyebilirsiniz mekanizmasını anlamak için. Ayrıca burada yeni bir tepki unsuru oluşturabilir ve uygulama bileşenine veri iletmek için props.components

için itin hiçbir mağazalarında

veri almak için yeteneği var ve kukla oluşturmak için bu işlevi değiştirin ile

routes.jsx yeni veri bileşeni

module.exports = function(serverData){ 
    var Dummy= React.createClass({ 
    render: function() { 
     return (
     <div> customProps=serverData </div> 
      );} 
     }); 

    return(
    <Route path="/" component={App}> 
     <Route path='data' component={{PonyMan: Dummy}} 
     <IndexRoute component={List}/> 
     <Route path="/about" component={About}/> 
    </Route> 
    ); 
} 

server.jsx:

app.get('*', (req, res) => { 
    myCustomData = 'I like ponies' 
    const routes = createRoutes(myCustomData); //from imported routes.jsx 
    match({ routes: routes, location: req.url }, (err, redirect, props) => { 
     const appHtml = ReactDOMServer.renderToString(routerContext(props)); 
     res.render('index.jade', {reactOutput: appHtml}); 
    }) 
}); 

App.js

var App = React.createClass({ 
    render: function() { 
     return (
      <div id="app-root" className="container"> 
       <Nav/> 
       <h1>{this.props.main}</h1>//this now shows <div>I Like Ponies</div> 

       //this can still display other routes 
       {this.props.children} 
       <div className="Row"> 
        <div className="footer col-lg-12"></div> 
       </div> 
      </div> 
     ) 
    }  
}); 

Not; sanki daha önce tepki-rota vermedi neyi örnek olarak https://github.com/choonkending/react-webpack-node

Answer 2

(en her zaman şimdilik bazı verilerini yüklemek asume edelim):

Yani

renderInitialState() { 
    const innerHtml = `window.__INITIAL_STATE__ = ${JSON.stringify(this.props.initialState)}`; 
    return <script dangerouslySetInnerHTML={{__html: innerHtml}} />; 
} 

: Eğer "kabuk" hale yerine tepki için yeşim kullandığınız gibi göründüğünü

<script>window.__INITIAL_STATE__ = JSON.stringify(yourObject);</script> 

Not. Aynı şey geçerlidir ama yeşim şablonu için yapın.

Genellikle bunu, <body>'unuzun (ancak uygulama js komut dosyanızın üstünde) altından oluşturursunuz.

İstemci durumunuz için akı kullanıyorsanız, mağazanızı oluştururken bu nesneyi geçirirsiniz, ör. redux için:

RouterContext onunla ne yapacağını bilmediği için Sizin props.data = {q:123};, her yerde çağrılmadığı

const store = configureStore(window.__INITIAL_STATE__);