4、React开发：高阶组件、列表组件与错误处理实践

React开发：高阶组件、列表组件与错误处理实践

1. 高阶组件（HOC）示例与多照片动态展示

1.1 HOC示例代码

function HOC(Subcomponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      ...
    }
    Render() {
      <ComponentThatProvidesBasicFunctionality>
          <Subcomponent/>
      </ComponentThatProvidesBasicFunctionality>
    }
  }
}

1.2 多照片动态展示案例分析

1.2.1 需求概述

• 用户可在一个动态中发布多张照片。
• 若照片数量为2 - 3张，以2x2网格展示。
• 若照片数量为5 - 8张，以3x3网格展示。

1.2.2 实现步骤

1. 创建Feed工厂组件 ：根据照片数量返回不同的Feed组件。

export default function FeedFactory(props) {
  let nu