Question

我正在尝试在节点上工作，而我将是第一个承认它有点超出我的人。如果没有很好的教程列表和故障排除受限制，我会尽我所能以正确的方式尽可能少地提出问题。我相信我搞砸了一个要求，但它可能只是我不完全理解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";

这些只是我的导入，并由快速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

将.button { float: center; display: flex; display: inline-block; border-radius: 10px; background-color: #a6a6a6; border: none; color: #FFFFFF; text-align: center; font-size: 26px; padding: 20px; min-width: 15.96%; transition: all 0.3s; cursor: pointer; margin: 5px; text-decoration: none; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '»'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; color: #FFFFFF; } .button:hover span { padding-right: 25px; color: #FFFFFF; } .button:hover span:after { opacity: 1; right: 0; }更改为export { Classname }; 按照顾明峰的建议。此外，导入了npm包express-react-views并使用它来为我的视图引擎供电。仍然不确定，如果这是最好的解决方案，我可能会改进它，但它的确有效！

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

1 个答案: