将反应组件转换为字符串时出现错误

Question

我一直在反应几个月，现在我一直在做服务器端渲染。最近我开始用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？

Answer 1

在这种情况下，你从info-box.jsx需要进口类InfoBox（我在为HTML组件的渲染方法使用jsx），因为在info-box.jsx没有default export

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

或添加default到info-box.jsx ，

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

更新：

你能避免使用createFactory，只是呈现的反应成分，像这样

ReactDom.renderToString(<InfoBox />)