Invariant Violation: renderComponentToString(): 你必须传递一个有效的 ReactComponent答案

【问题标题】：Invariant Violation: renderComponentToString(): You must pass a valid ReactComponentInvariant Violation: renderComponentToString(): 你必须传递一个有效的 ReactComponent
【发布时间】：2017-05-29 18:20:23
【问题描述】：

我正在尝试使用 React 和 Node.js 构建应用程序，但我不确定如何在前端使用 React。我正在尝试关注this tutorial。现在，在我的 routes.js 文件中，我有：

var JSX = require('node-jsx').install();
var React = require('react');
var Homepage = require('./../components/Homepage');

module.exports = {

    index: function(req, res) {
        var markup = React.renderComponentToString(Homepage);

        res.render('home', {
            markup: markup
        });
    }

};

renderComponentToString 方法似乎是问题所在，因为我的服务器启动，然后我收到错误消息“错误：不变违规：renderComponentToString(): You must pass a valid ReactComponent.”我的主页组件如下所示：

/** @jsx React.DOM */

var React = require('react');
var style = require('./style');

module.exports = About = React.createClass({
    render: function() {

        return (
            <div style={ style.style1 }>
                some more code here
            </div>
        )

    }
})

我似乎无法弄清楚我的反应组件出了什么问题。任何帮助，将不胜感激。谢谢！

【问题讨论】：

@MayankShukla：./../components/Homepage 与../components/Homepage 相同。
路径很奇怪，因为我实际上有一个包含两个不同路由文件的路由文件夹。我现在在路由文件 #1 中，所以我只是慢慢到父目录来访问组件文件夹。
Homepage 是一个函数。我假设renderComponentToString 实际上需要一个元素：React.renderComponentToString(<Homepage />);（或React.renderComponentToString(React.createElement(Homepage));

标签： javascript node.js reactjs

【解决方案1】：

React.renderComponentToString 接受一个 React 组件。尝试像这样传递它

var markup = React.renderComponentToString(Homepage());

参考this链接

【讨论】：