Question

我想用块分割我的React应用程序并遇到问题。 React.Component不会呈现通过React.Component加载的子require.ensure。下面的示例代码。
文件一：

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;

然后我检索下一个错误：

未捕获错误：Minified React错误＃130;访问 http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 对于完整的消息或使用非缩小的开发环境来完整错误和其他有用的警告。

谁能告诉我我做错了什么？

Answer 1

我建议您在加载依赖项时为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>
    );
  }
}

Answer 2

我可以建议你使用es6 sintax，然后设置process.env.NODE_ENV ===＆＃39; dev＆＃39; 有关错误和警告的更多有用信息

如果您使用的是webpack，请尝试webpack-dev-server

归档一个

Map<String, Object> mobileEmulation = new HashMap<>();

String userAgent = "Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 " +
                "(KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10";

ChromeOptions options = new ChromeOptions();

options.addArguments("--user-agent=" + userAgent);
options.addArguments("window-size=1039,859");

DesiredCapabilities capabilities = DesiredCapabilities.chrome();
capabilities.setCapability(ChromeOptions.CAPABILITY, options);

文件二＆＃34; Child.jsx＆＃34;

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

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

Async React.Component对我有用

2 个答案: