렌더링 서버 측이 오류를 일으키고 있습니다.

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"; 

이들은 내 수입품이며 자동으로 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로 작성되고보기 폴더에 저장됩니다. 원시 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; 

다음은 내보기 중 하나의 예입니다. 이것은 인덱스 뷰입니다.

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) 

정말 노드를 배우고 열심히 노력하고 있어요 : 여기

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 }; 

오류 출력됩니다. 도움이되는 의견을 보내 주시면이 문제를 해결하기 위해 노력하고 있습니다. 충고에 감사드립니다. 나는 클라이언트 측 코드에 대해 React에서 꽤 괜찮은 편이지만 서버에서 내 엉덩이를 걷어차 고있다. 롤!

Answer 1

변경된 번호 : export { Classname }; : export default Classname; : Gu mingfeng의 제안. 또한, npm 패키지를 가져 와서 express-react-views를 사용하여 내 뷰 엔진에 전원을 공급했습니다. 아직도 이것이 확실하지 않다면, 이것이 최선의 해결책이라면, 아마도 그것을 향상시키기 위해 보일 것입니다.하지만 효과가 있습니다!