2016-04-04 4 views
1

私は数ヶ月前から反応していましたが、私はサーバー側のレンダリングを成功させてきました。最近、私はES6 + Babelで個人的なアプリを書き直し始めました。私は反応するコンポーネントにrenderToString()を実行しようとすると、私はこのエラーを取得:反応成分を文字列に変換するときにエラーが発生する

renderToString(): You must pass a valid ReactElement.

いくつかのコード

コンポーネント

import React from 'react'; 
import ReactDOM from 'react-dom'; 


export class InfoBox extends React.Component { 
    render() { 
     return (
      <div> 
       <div className='info-box'> 
        Hello 
       </div> 
      </div> 
     ); 
    } 
} 

if(typeof window !== 'undefined') { 
    ReactDOM.render(<InfoBox/>, document.getElementById('info-box-mount-point')); 
} 

特急インデックスルート

import express from 'express'; 
import React from 'react'; 
import ReactDom from 'react-dom/server'; 
import InfoBox from '../react-components/info-box/info-box.jsx'; 

let router = express.Router(); 
let InfoBoxFactory = React.createFactory(InfoBox); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index', { 
     reacthtml: ReactDom.renderToString(InfoBoxFactory) 
    }); 
}); 

module.exports = router; 

別の質問:コンポーネントを.jsxまたは.jsとして保存する必要がありますか? info-box.jsxに何default export

import { InfoBox } from '../react-components/info-box/info-box.jsx'; 
     ^^^  ^^^ 

またはinfo-box.jsxdefaultを追加がないので、あなたがinfo-box.jsxから輸入クラスInfoBoxを必要とする。この場合、

答えて

2

(私はHTMLのためのコンポーネントのrenderメソッドでjsxを使用しています) 、

export default class InfoBox extends React.Component {} 
     ^^^^^^^ 

更新:

あなたはcreateFactoryを使用して回避し、ちょうど私が助けのために、感謝を参照してくださいので、

ReactDom.renderToString(<InfoBox />) 
+1

のように、コンポーネントを反応させるレンダリングすることができます! –