React - composability =>子コンポーネントを親に渡してサーバーサイドレンダリング

これが可能かどうか疑問です。React - composability =>子コンポーネントを親に渡してサーバーサイドレンダリング

私はそうのような親コンポーネントを持っている：私がやりたいものを

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> 

    ) 

    } 

});

は小道具を使用して親コンポーネントに子コンポーネントを「合格」です。このような

何か：

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


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

通常、親コンポーネントは、その子に「ハードコード化された」参照を持っているでしょう。 しかし、私が探しているのは、親のReactコンポーネントのパターンです。は、必要に応じて異なる子を "採用"します。

これは可能ですか？これが内蔵されて

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


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

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

出典

2016-03-30 Alexander Mills

var Parent = React.createClass({ 

    render: function(){ 

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

})

使用リアクト：

おそらく、これを行うには正しい方法のようなものですこれはおそらく行うための一つの方法です

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

出典

2016-03-30 22:13:07 thangngoc89

ありがとう！これを示すドキュメントへのリンクがありますか？ –

あなたが行くhttp://facebook.github.io/react/docs/multiple-components.html#children – thangngoc89

をそれ

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> 

      ) 

     } 

    }); 
};

出典

2016-03-30 22:25:44

私はあなたの提案したようにそれを使用することを強くお勧めします。リアクションはすべてコンポーネントを構成することです。 – thangngoc89

HTMLコンポーネントの例https://github.com/MoOx/statinamic/blob/eb4e94ff4d4843a258a8f2fbda7087c173b66c28/src/static/to-html/Html.js – thangngoc89

React - composability =>子コンポーネントを親に渡してサーバーサイドレンダリング

答えて

関連する問題