如何合并React的External与Poller组件？解决connect传props.children报错问题

我明白你想简化组件结构，把原来的External和Poller合并，但遇到了connect函数的参数错误——这是因为connect只能接收React组件的定义（类或函数），而this.props.children是已经实例化的React元素，直接传入肯定会报错。下面给你一个可行的合并方案：

核心思路 #

把原来External组件的connect逻辑直接绑定到Poller组件上，让Poller同时承担轮询管理和子组件数据传递的职责，这样就不需要额外的External组件了。

修改后的完整代码 #

// 直接将connect与Poller组件绑定，替代原来的External组件
const ConnectedPoller = connect(
  /* 这里填入你的mapStateToProps逻辑 */,
  /* 这里填入你的mapDispatchToProps逻辑 */
)(Poller);

class Poller extends Component {
  componentDidMount() {
    // 挂载后启动轮询
    this.model.startPolling();
  }

  componentWillUnmount() {
    // 卸载时停止轮询，避免内存泄漏
    this.model.stopPolling();
  }

  render() {
    // 将connect注入的props和自身props传递给所有子组件
    const childrenWithProps = React.Children.map(this.props.children, child => {
      return React.cloneElement(child, { ...this.props });
    });

    return childrenWithProps;
  }
}

使用方式 #

现在你可以直接用ConnectedPoller包裹需要数据的子组件，和原来的External用法一致：

<ConnectedPoller>
  <ComponentRequiringData />
</ConnectedPoller>

为什么这个方案可行？ #

1. connect接收的是Poller这个组件类，完全符合它的参数要求，不会再报错；
2. Poller组件保留了原来的轮询生命周期逻辑，挂载启动、卸载停止，确保资源不浪费；
3. 通过React.cloneElement把connect注入的状态、方法，以及Poller自身的props都传递给子组件，和原来的功能完全一致。

补充说明 #

你提到不在祖先层级轮询是因为后端资源消耗大，仅少数组件需要——这个方案完美适配你的需求：只有当ConnectedPoller被渲染时才会启动轮询，卸载时立即停止，不会造成不必要的后端请求。

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