異步React.Component不會爲我工作

我想通過塊拆分我的React應用程序並遇到問題。 React.Component不會渲染通過require.ensure加載的子代碼React.Component。下面的示例代碼。
文件之一：
異步React.Component不會爲我工作

let Child; 
class Parent extends React.Component { 
    constructor() { 
     super(); 
     require.ensure(['child'],() => { 
     Child = require('child'); 
     }); 
    } 
    render() { 
    return (
     <div> 
     {!!Child && <Child/>} 
     </div> 
    ); 
    } 
}

文件中的兩個

class Child extends React.Component { 
    render() { 
    return <div>hello world</div>; 
    } 
} 

module.exports = Child;

我檢索下一個錯誤：

Uncaught Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

誰能告訴我什麼，我做錯了什麼？

來源

2016-12-27 Andrey Tsarenko

我建議您在加載依賴關係時向React提供某種形式的內容。我會推薦某種加載消息。
您需要確保在加載完成時組件被重新渲染。最簡單的方法是將require調用的結果存儲在組件狀態中，而不是全局中。

例如，你的代碼可能是這個樣子：

class Parent extends React.Component { 
    constructor() { 
     super(); 
     require.ensure(['child'],() => { 
     this.setState({Child: require('child')}); 
     }); 
    } 
    render() { 
    return (
     <div> 
     {'Child' in this.state ? <this.state.Child/> : "Loading..."} 
     </div> 
    ); 
    } 
}

來源

2016-12-27 18:25:56

我已經採納了您的建議，現在我將'Child'組件存儲到'store'中。但是我面臨另一個問題_Uncaught TypeError：無法讀取''中undefined_的屬性'狀態'。我認爲這個問題發生在捆綁縮小之後。 –

這是一個核心React/Javascript功能。你的設置有些不正確，可能是在你的編譯器/縮小器中，它不在你粘貼的任何代碼中，而且我們很難識別。 –

我可以建議你使用ES6 sintax，並設置process.env.NODE_ENV ===「開發」對錯誤的更多有用信息和警告

如果你正在使用的WebPack試試這個webpack-dev-server

文件一個

import { Component } from 'react' 
import Child from './Child' 

class Parent extends Component { 
    constructor() { 
    super() 
    } 
    render() { 
    return (
     <Child/> 
    ) 
    } 
}

文件中的兩個「Child.jsx」

import { Component } from 'react' 

class Child extends Component { 
    render() { 
    return (
     <div>Hello World</div> 
    ) 
    } 
} 

export default Child

來源

2016-12-27 18:00:14 Victorious

「的WebPack不支持ES6模塊;使用require.ensure或要求直接取決於哪個模塊格式的transpiler造成的。」 https://webpack.github.io/docs/code-splitting.html –

異步React.Component不會爲我工作

回答

相關問題