渲染反应服务器端导致错误

Question

我正在尝试在node上工作，我将是第一个承认它超出我范围的人。 在没有足够的教程列表和故障排除的情况下，我正在尽力以适当的方式提出尽可能少的问题。 我相信我搞砸了一个需求，但可能只是我不完全了解renderToString。 我正在运行节点，表达并做出反应，最终，我想使用MERN堆栈。

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
import React from "react";
import { renderToString } from "react-dom/server";

这些只是我的导入内容，并且由Express CLI自动加载。 只是以为我将它们包括在内，以防它们相关。

function render(filePath, options, callback){

  function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
  }

  let views = require(filePath);
  let name = filePath.slice(filePath.lastIndexOf("/") + 1, -4);
  let componentName = capitalizeFirstLetter(name);
  let Component = views[componentName];
  // current problem is believed to be an import issue. I don't know for sure,
  // but the data seems to be mutated and not in a React form.
  let markup = renderToString(<Component model={options} />)
  return callback(null, markup);
}

app.set('views', path.join(__dirname, 'views'));
app.engine("jsx", render);
app.set('view engine', 'jsx');

我的视图使用JSX编写，并存储在views文件夹中。 我正在尝试将它们编译为原始html，css和javascript，我认为这是做到这一点的方法。

This is my index route, if it matters.

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});

module.exports = router;

这是我的一种观点的例子。 这是索引视图。

import React from "react";

import Layout from "./layout.jsx";

class Index extends React.Component {
  constructor(props){
  super(props);
  }

  render(){
    return (
    <Layout>
      <h1>
        {this.props.model.title}
      </h1>
      <p>
        Welcome to <strong>{this.props.model.title}</strong>
      </p>
    </Layout>
    );
  }
}

export { Index };

这是错误输出：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Index`.
undefined
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Error`.
undefined
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Error`.
GET / 500 472.717 ms - 1527
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Error`.
    at invariant (/Users/Tim/dev/express/myPage2/node_modules/react/node_modules/fbjs/lib/invariant.js:38:15)
    at [object Object].instantiateReactComponent [as _instantiateReactComponent] (/Users/Tim/dev/express/myPage2/node_modules/react/lib/instantiateReactComponent.js:85:134)
    at [object Object].ReactCompositeComponentMixin.performInitialMount (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactCompositeComponent.js:355:36)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactCompositeComponent.js:244:21)
    at Object.ReactReconciler.mountComponent (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactReconciler.js:46:35)
    at /Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactServerRendering.js:43:36
    at ReactServerRenderingTransaction.Mixin.perform (/Users/Tim/dev/express/myPage2/node_modules/react/lib/Transaction.js:136:20)
    at renderToStringImpl (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactServerRendering.js:38:24)
    at renderToString (/Users/Tim/dev/express/myPage2/node_modules/react/lib/ReactServerRendering.js:68:10)
    at View.render (app.js:30:15)

我真的很努力学习节点。 我希望收到任何有用的反馈，希望能解决这个问题！ 感谢您的建议！ 对于客户端代码，我在React上还算不错，但是它正在服务器上踢我的屁股。 大声笑！

Answer 1

更改了export { Classname }; export default Classname; 按照顾明凤的建议。 另外，导入了npm包express-react-views，并使用它来驱动我的视图引擎。 仍然不确定，如果这是最好的解决方法，我可能会寻求改进，但是可以！