异步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不会为我工作

回答

相关问题