React使用require.ensure按需加载组件时无法读取组件props问题

嘿，我一眼就看出问题所在啦——你的高阶组件（HOC）在渲染异步加载的组件时，没有把自身接收到的props传递给子组件，所以子组件自然读不到任何props值～

问题核心 #

原来的render方法里只是简单渲染了<this.state.component />，但没有传递任何属性，就像你给别人递东西却没把东西交出去一样😅。

修改后的完整代码 #

我们只需要在渲染子组件时，用扩展运算符{...this.props}把HOC接收到的所有props透传过去就行：

import React from 'react';
export default class AsyncCp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {component: null};
  }

  componentDidMount() {
    require.ensure([], (require) => {
      const Component = require('./cp').default;
      this.setState({ component: Component });
    });
  }

  render() {
    // 解构赋值让代码更清晰
    const { component: Component } = this.state;
    
    // 关键：把所有props传递给异步加载的组件
    return Component ? <Component {...this.props} /> : <div>加载中...</div>;
  }
}

额外优化建议 #

1. 添加加载状态：把原来返回的null换成加载提示或骨架屏，提升用户体验，避免页面空白。
2. 动态组件路径（可选）：如果你的HOC需要支持加载不同组件，可以把组件路径通过props传入，比如this.props.componentPath，然后在componentDidMount里动态加载，同时在componentDidUpdate里监听路径变化，重新加载组件。

现代React按需加载方案（补充） #

如果你使用的是React 16.6及以上版本，更推荐使用官方的React.lazy和Suspense来实现按需加载，代码更简洁优雅：

import React, { lazy, Suspense } from 'react';

// 懒加载目标组件
const AsyncCp = lazy(() => import('./cp'));

// 使用时包裹在Suspense里
function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <AsyncCp yourProp="value" anotherProp="anotherValue" />
    </Suspense>
  );
}

内容的提问来源于stack exchange，提问作者umaru