ReactJS.NET을 사용하여 서버 측 렌더링이 실패했습니다.

Question

현재 'ReactJS.NET'을 사용하여 서버 측에서 렌더링 할 수있는 ReactJS (다른 자습서)를 얻으려고합니다.

가 'CommentBox'라는 이름의 구성 요소를 찾을 수 없습니다 :

그러나, 나는 항상 다음과 같은 메시지가 나타납니다. App_Start \ ReactConfig.cs에 추가하는 것을 잊어 버리셨습니까?

코드 here을 보면 매우 직설적 인 것으로 보입니다.

내 ReactConfig.cs : 나는 내가 단순히 설정에 CommentBox.js 및 수행을 생성 (웹팩를 통해) 추가 할 필요가 생각했던 내가 잘못 여기서 뭐하는 거지 점을 볼 수 없습니다

public static class ReactConfig 
{ 
    public static void Configure() 
    { 
     ReactSiteConfiguration.Configuration 
      .AddScript("~/Scripts/dist/CommentBox.js"); 
    } 
} 

.

내보기에서 나는 단지 @Html.React("CommentBox",new {})을 호출하여 예외가 throw되는 것을 시도합니다. ReactJS.NET 액세스 할 수 있도록

var CommentBox = (function (_super) { 
    __extends(CommentBox, _super); 
    function CommentBox() { 
     return _super !== null && _super.apply(this, arguments) || this; 
    } 
    CommentBox.prototype.render = function() { 
     return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("div", { className: "commentBox" }, 
      __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("h1", null, "Comment-Box"), 
      __WEBPACK_IMPORTED_MODULE_0_react__["createElement"](CommentForm, null), 
      __WEBPACK_IMPORTED_MODULE_0_react__["createElement"](CommentList, null)); 
    }; 
    return CommentBox; 
}(__WEBPACK_IMPORTED_MODULE_0_react__["Component"])); 

Answer 1

당신이 ReactJS.NET와 웹팩을 사용하는 경우, 당신은 공개적으로 구성 요소를 노출해야합니다

이

생성 된 자바 스크립트 파일에서 찾을 수있는 코드입니다 그들. 여기 가이드를 참조하십시오 : https://reactjs.net/guides/webpack.html

Answer 2

@ Html.React ("Components.CommentBox", new {})를 호출 해보십시오. 노출 자의 작업 방식은 이렇게 생각합니다. 나는 지금 같은 일을 시도하고 있으며이 오류도있다. 이것은 나를 도울 수 있지만 더 많은 오류가 발생합니다 :)

Answer 3

Webpack 2.2.1을 사용하고 있으며이 방법으로 문제를 해결합니다. 이 방법으로 나는이

{ 
    entry: '/path/to/CommentBox.js', 
    output: { 
     library: ['MyComponents'], 
     libraryTarget: 'this' 
    } 
} 

같은 것을 가지고, 모든 먼저 오브젝트 내부의 내 구성 요소를 노출하고 나는 webapck 구성 파일 내에서, 그 후이

expose const CommentBox; 

을 수행과 끝 webpack 전역 개체 (V8, 그래서 노드 env), 개체 MyComponents.CommentBox에 노출됩니다

Answer 4

나는 구성 요소에 대한 전체 네임 스페이스 경로를 참조하는 데 필요한 것으로 나타났습니다. 예를 들어, 제 경우에는 구성 요소 이름이 Portal.Scheduling 네임 스페이스에 ResourceAttributesComponent 이었으므로 작성해야합니다. @Html.React("Portal.Scheduling.ResourceAttributesComponent", new {})