2017-02-23 5 views
0

reactjs를 내 django와 통합하고 있습니다. 설정을 완료하고 서버에서도 페이지를 렌더링 할 수 있지만 클라이언트 측에서는 렌더링 및 이벤트 처리 및 첨부와 관련하여 오류가 발생합니다. "잡히지 않는 ReferenceError : MainContainer가 정의되지 않았습니다". 나는 완전히 여기에서 길을 잃는다. 나를 도와 줘라.클라이언트 측 렌더링을 django로 반응

error in index.html

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="static/src/css/bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="static/src/css/style.less"/> 
    </head> 

    <body> 
     <script> 
        // var INITIAL_DATA = JSON.parse('{{ serialized_value|safe }}') 
        var INITIAL_DATA = {{ serialized_value|safe }} 
     </script> 
     <div id="app">{{ rendered|safe }}</div> 
     <script type="text/javascript" src="static/build/index_webpack.js"></script> 
     <script> 
      // ReactDOM.render(React.createFactory(MainContainer)({isOpen: false, props: {'freeShipping': free_shipping_message_new,'navigationBar': [loose_leaf_content]}}), document.getElementById('app')); 
      ReactDOM.render(MainContainer({isOpen: false, props: {'freeShipping': free_shipping_message_new,'navigationBar': [loose_leaf_content]}}), document.getElementById('app')); 
     </script> 
    </body> 
</html> 
+0

우리의 템플릿에 번들을 통합 할 수있는'MainContainer'은 아마도 반작용 구성 요소입니다. 구성 요소가'index_webpack.js'에 선언 또는 임포트 되었습니까? 그렇다면 해당 파일이 올바르게로드되고 있습니까? 그렇지 않은 경우 구성 요소를 어떻게 든 창으로 가져와야합니다. – ChidG

+0

index_webpack.js에서 구성 요소를 가져 왔지만, 어떻게 가져 왔습니까? Idk 때문에 오류가 발생합니다.하지만 작동하지 않는 경우 창에서 가져 오는 방법을 알려주시겠습니까? – Prashant

+0

일반적으로 webpack 번들에는 전체 javascript (ReactDOM.render 행 포함)가 있습니다. 그렇게하면 모든 것이 한 곳에서 이루어집니다. 'index_webpack.js'가 성공적으로로드되고 있습니까? – ChidG

답변

0

당신은 당신이 장고 템플릿으로 웹팩 번들을 통합 할 수 있도록하는 django-webpack-loader를 사용하여 더 나은 수 있습니다. 우리에게는 장고와 함께 웹팩을 설치하는 데 많은 고통이있었습니다. 이제 우리는 그냥 거기에 앉아 자동으로 우리의 애플 리케이션의 모든 빌드에서 모든 웹팩에 대해 생각하지 않고 우리가

{% render_bundle 'react_app' %}