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.jsx
にdefault
を追加がないので、あなたがinfo-box.jsx
から輸入クラスInfoBox
を必要とする。この場合、
のように、コンポーネントを反応させるレンダリングすることができます! –