Question

我已经做了几个月的反应并且我已经成功地进行了服务器端渲染。最近我开始用ES6 + Babel重写个人应用程序。当我尝试在react组件上运行renderToString()时，我收到此错误：

renderToString（）：您必须传递有效的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？（我在html的组件的render方法中使用jsx

Answer 1

在这种情况下，您需要从InfoBox导入类info-box.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 />)

将react组件转换为字符串时出错

1 个答案: