ReactJS中按共享integer字段排序不同类型嵌套对象数组的方法

你的思路是完全可行的，具体实现可以参考如下方案： #

实现逻辑 #

1. 先把不同类型的嵌套数组合并为单个全局数组，同时给每个项增加类型标识方便后续匹配渲染逻辑
2. 对合并后的数组按number字段升序排序
3. 遍历排序后的数组，根据类型字段匹配你已经写好的对应样式渲染即可

完整代码示例（适配你原有的组件结构） #

class LessonCreatorPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page_preview: {}, // 存储后端返回的page对象
    }
  }
  showPage(id){
    // 你原来的接口请求逻辑无需改动，拿到响应后正常赋值给this.state.page_preview即可
  }

  render(){
    const { page_preview } = this.state;
    // 无数据时返回空
    if (!Object.keys(page_preview).length) return null;

    // 1. 合并所有类型的内容项，新增type字段标记内容类型
    const allItems = [
      // 处理视频数组
      ...(page_preview.videos ? page_preview.videos.map(video => ({...video, type: 'video'})) : []),
      // 处理图片数组
      ...(page_preview.images ? page_preview.images.map(image => ({...image, type: 'image'})) : []),
      // 处理富文本数组
      ...(page_preview.rtfs ? page_preview.rtfs.map(rtf => ({...rtf, type: 'rtf'})) : []),
      // 处理问题数组
      ...(page_preview.questions ? page_preview.questions.map(question => ({...question, type: 'question'})) : []),
    ]

    // 2. 按number字段升序排序
    const sortedItems = allItems.sort((a, b) => a.number - b.number);

    // 3. 遍历排序后的数组，按类型渲染对应内容
    return (
      <React.Fragment>
        {sortedItems.map(item => {
          switch(item.type) {
            case 'video':
              const video_id = `${item.vimeo_id}`;
              return (
                <React.Fragment key={item.id}>
                  <Label pointing="below">{item.title}</Label>
                  <Embed id={video_id} source="vimeo" />
                  <Label pointing>{item.description}</Label>
                </React.Fragment>
              );
            case 'image':
              // 替换为你自己的图片渲染逻辑
              return (
                <React.Fragment key={item.id}>
                  {/* 原有的图片渲染代码 */}
                </React.Fragment>
              );
            case 'rtf':
              // 替换为你自己的富文本渲染逻辑
              return (
                <React.Fragment key={item.id}>
                  {/* 原有的富文本渲染代码 */}
                </React.Fragment>
              );
            case 'question':
              // 替换为你自己的问题渲染逻辑，可直接调用item.answers获取关联的答案
              return (
                <React.Fragment key={item.id}>
                  {/* 原有的问题渲染代码 */}
                </React.Fragment>
              );
            default:
              return null;
          }
        })}
      </React.Fragment>
    )
  }
};

注意事项 #

• 代码已经做了数组存在性判断，兼容低版本ES语法环境，不会出现读取undefined的报错
• 如果存在部分内容没有number字段的情况，可以修改排序逻辑加兜底：allItems.sort((a, b) => (a.number || 0) - (b.number || 0))
• 所有渲染项的key用了对应内容的id，保证全局唯一即可正常渲染

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