반응 구성 요소가 작동하지 않는 Webpack require.ensure (코드 분할)?

아래 구성 요소가 있습니다. dom에 제품 모듈을 렌더링하지 않고 콘솔에 오류를 표시하지 않습니다.반응 구성 요소가 작동하지 않는 Webpack require.ensure (코드 분할)?

그리고 ReactDOM.render(<ProductModule/>,document.getElementById('product-container'));을 사용하면 효과적입니다.

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
class ProductModuleWrapper extends Component { 
    constructor(props) { 
    } 

    render() { 
     return (
      <div className="product-container"> 
       {this.renderProductModules()} 
      </div> 
     ); 
    } 

    renderProductModules() { 
     require.ensure([],(require) => { 
      var ProductModule = require('../ProductModule').default; 
      return ProductModule; 
     },'productmodule'); 
    } 
}

편집 :

나는 이것이 통화를 보장 요구의 비동기 자연과 함께 할 수있는 뭔가 생각,

출처

2016-10-13 Renjith P.N.

는 제품 모듈을 렌더링 하는가 :

나는이 블로그 게시물에 설명 된대로 this.state를 사용하는 것이 좋습니다? 지금 당신은 아무것도 돌려 보내지 않고 있습니다. 'return require.ensure ...' –

감사합니다, 그렇지만 'QuickShopProductModule'을 'ReactDOM.render'에 랩핑하고 일부 div로 렌더링하면 정상적인 구성 요소와 동적으로로드 된 구성 요소가 하나씩 차이가납니다. 나중에 소유자 속성이 없습니다. –

구성 요소의 상태 나 소품이있는 경우에만 다시 렌더링 반작용 도와주세요 업데이트되었습니다. 귀하의 예제에서 둘 다 비동기 적으로 가져온 구성 요소를 렌더링하지 않습니다. 당신이이`renderProductModules` 함수에서 반환하는 경우 http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/

출처

2016-11-17 20:17:12 jorilallo

나는 이것을 이미 알아 냈다. 답장을 보내 주셔서 감사합니다. :-) –

반응 구성 요소가 작동하지 않는 Webpack require.ensure (코드 분할)?

답변

관련 문제