Reaktif ile sunucu tarafı oluşturma - composability => alt bileşeni üst öğeden geçirme

Bunun mümkün olup olmadığını merak ediyorum. ne yapmak istiyorsunuz 'pass' sahne kullanılarak ebeveyn bileşenine bir çocuk bileşeniReaktif ile sunucu tarafı oluşturma - composability => alt bileşeni üst öğeden geçirme

const React = require('react');  

module.exports = React.createClass({ 

    render: function(){ 

     return (

      <html lang="en"> 
      <head> 
       <meta charset="UTF-8"></meta> 
        <title>Title</title> 
      </head> 
      <body> 

       {this.props.child} 

      </body> 
      </html> 

    ) 

    } 

});

geçerli:

Bir ebeveyn bileşeni şöyle var. Böyle

şey:

const child = React.createClass({ 
    //// etc 
}); 


ReactDOMServer.renderToString(<HTMLParent child={child}/>);

Normalde bir ana bileşeni olan çocuklara "kodlanmış" referansı olurdu. Fakat aradığım şey, bir ebeveyn Reaktif bileşeninin " farklı çocuklara gerektiği gibi" adapte olabilmesidir.

Bu mümkün mü? Bunu yapmanın doğru yolu belki

şey gibidir:

const child = React.createClass({ 
     //// etc 
    }); 


    const str = ReactDOMServer.renderToString(<child />); 

    ReactDOMServer.renderToString(<HTMLParent child={str}/>);

kaynak

2016-03-30 Alexander Mills

Bu inşa edilmiştir Tepki

var Parent = React.createClass({ 

    render: function(){ 

     return (
     <div>{ this.props.children }</div> 
    ) 
    } 

})

Kullanımı:

ReactDOMServer.renderToString(<Parent><Children /><Parent>)

kaynak

2016-03-30 22:13:07 thangngoc89

Teşekkürler! Bunu gösteren dokümanlar için bir bağlantınız var mı? –

Buradan http://facebook.github.io/react/docs/multiple-components.html#children – thangngoc89

Bu yapmanın bir yolu belki de

const React = require('react'); 


module.exports = function (children) { 

    return React.createClass({ 

     renderChildren: function() { 

      return children.map(function (item) { 

       var Comp = item.comp; 
       var props = item.props; 

       return (
        <div> 
         <Comp {...props}/> 
        </div> 
       ) 
      }); 

     }, 

     render: function() { 

      return (

       <html lang="en"> 
       <head> 
        <meta charset="UTF-8"></meta> 
        <title>Title</title> 
       </head> 
       <body> 

       <div> 
        {this.renderChildren()} 
       </div> 

       </body> 
       </html> 

      ) 

     } 

    }); 
};

kaynak

2016-03-30 22:25:44

adresine gidin. Önerdiğim gibi kullanmanızı şiddetle tavsiye ediyorum. Tepki, bileşenlerin oluşturulmasıyla ilgilidir. – thangngoc89

Örnek bir HTML bileşeni https://github.com/MoOx/statinamic/blob/eb4e94ff4d4843a258a8f2fbda7087c173b66c28/src/static/to-html/Html.js – thangngoc89

Reaktif ile sunucu tarafı oluşturma - composability => alt bileşeni üst öğeden geçirme

cevap

İlgili konular