全国服务热线:4008-888-888

公司新闻

小程序设计软件_react开发中怎么使用require.ensur

react开发中如何使用require.ensure加载es6风格的组件     作者:@si   本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

以下方式也可以,但是比较low,可以作废了:

1、问题提出:想通过require.ensure加载es6风格的模块?

2、出现问题:monjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗?

遗憾的是:一般语言编译工具(如babel),不支持直接require一个es6风格的React组件。

怎么办??

3、react代码分割方式:

react代码分割常见使用router方式,但是单页面应用,不打算router下,可以用require.ensure进行按需加载

react的api在此:

文档中并没有实例,而且现阶段,大部分程序已经完全按照es6风格的代码。

那么怎样让es6模块也能通过require呢

先看结论:在es6方式书写的模块底部增加一句module.exports=yourclassName

例如:module.exports = Hello;

4、代码举例:

1)Container模块如下:

import React, {Component} from 'react';
export default class Container extends Component {
 constructor() {
 super();
 this.state = {
 currentComponent: null
 doSomething = () = {
 require.ensure(['./app2'], (require) = {
 const Comp = require('./app2');
 this.setState({
 currentComponent: Comp/ 
 render() {
 return (
 div 
 span this.doSomething} "1px solid #000"}} 点击后,按需加载如下模块 /span 
 {this.state.currentComponent}
 /div 

2)app2模块如下

注意:在es6方式写的模块的最底下增加一句:module.exports = Hello;即可

import React from 'react'
export default class Hello extends React.Component {
 render(){
 return (
 div Hello /div 
//warning:这一句必须加上,因为在require.ensure中使用了require引入模块
module.exports = Hello;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服