2016-03-21 29 views
0

Ben bileşenlerini tepki verileri geçmek mümkün fasulye ettik:gibi sunucu tarafında onları işlenmiş zaman verilerle bileşenlerini görüntülemeyi nasıl

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

cevap

0

. 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

+0

Çok teşekkürler. Bir demo kontrol ettim. Tam olarak ihtiyacım olan şeyi yapıyor gibi görünüyor. Kaynakları okumak için birkaç saatim var. Aslında tepki-yol kaynağı okudum ve çatala yolunu buldum ve bu içeriğe additinonal veri aktarımı yapmak için RouterContext'teki 'getChildContext' işlevini değiştirdim. Ama senin yolun daha rahat görünüyor – xander27

+0

evet, daha fazla bir 'kesmek' düşünün. Dinamik içerik için redux mağazaları gibi bir şey kullanmak gerçekten çok daha kolay. Ve ilk sunucuyu oluşturmak istiyorsanız, sözleri çözen [bu] (https://github.com/choonkending/react-webpack-node/blob/master/app/api/fetchComponentDataBeforeRender.js) gibi bir şey ekleyebilirsiniz. render vermeden önce özel verileriniz için, hala tüm SEO profesyonellerini elde edersiniz – PijusV

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__); 
+0

ben kullandım yeşim render sunucu tarafında reaksiyona-yönlendirici redux ekspres firavunfaresi projenin iyi bir örnek görmek için redux depolar çeki bu proje kullanarak yolu daha kolay olurdu. Ben senin noktasını anlıyorum, ama sunucu-sider render (seo dostu ve vb) artılarını reddeder gibi görünüyor, js dahil tarayıcıda yürütülmesi gerekir. Jade + tepki kullandığımda, sunucu tarafında veri içeren tam sayfa oluşturuyordum. Ben tepki-yönlendirici ile şimdi yapmaya çalışıyorum (ve yeşim olmadan) – xander27

+0

Aslında, benim kötü - Yanlış soru adı yazdım. Yani şimdi değiştir. – xander27

+0

Fikir, sunucu üzerinde işlem yapmak ve sonra gereken verileri ileterek istemcideki aynı ikinci bir işlemin gerçekleşmesini sağlamaktır. Tüm izomorfik uygulamaların veriyi/mağazayı istemciye iletmesi gerekir - bkz. Https://github.com/DominicTobias/universal-react/ örneğin –

İlgili konular