面试题：Qwik组件Props高级难度问题

实现思路

接收表头数据：通过组件的Props接收动态的表头数据，表头数据应包含列名以及可能用于排序的字段名等信息。
渲染表格列：使用循环遍历表头数据，根据每个表头项渲染对应的表格列。
实现排序功能：为每个列头添加点击事件，在点击时记录当前点击的列，并根据该列的数据进行排序。可以维护一个排序状态（如排序字段和排序顺序），每次点击列头时更新这个状态，并重新渲染表格。

关键代码片段

以下以JavaScript和React为例：

import { useState } from 'react';

const QwikTable = ({ headers }) => {
  const [sortBy, setSortBy] = useState(null);
  const [sortOrder, setSortOrder] = useState('asc');

  const handleSort = (field) => {
    if (sortBy === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortBy(field);
      setSortOrder('asc');
    }
  };

  return (
    <table>
      <thead>
        <tr>
          {headers.map((header) => (
            <th
              key={header.field}
              onClick={() => handleSort(header.field)}
            >
              {header.label}
              {sortBy === header.field && (
                <span>{sortOrder === 'asc' ? '▲' : '▼'}</span>
              )}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {/* 这里假设数据从props传入并根据排序进行渲染 */}
        {/* 实际应用中需根据数据结构进行处理 */}
        {props.data.sort((a, b) => {
          if (!sortBy) return 0;
          const valueA = a[sortBy];
          const valueB = b[sortBy];
          if (sortOrder === 'asc') {
            return valueA > valueB ? 1 : -1;
          } else {
            return valueA < valueB ? 1 : -1;
          }
        }).map((row) => (
          <tr key={row.id}>
            {headers.map((header) => (
              <td key={header.field}>{row[header.field]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default QwikTable;

在上述代码中：

headers 通过Props传入，包含了每个列的配置信息。
sortBy 和 sortOrder 用于记录排序状态。
handleSort 函数处理列头点击事件，更新排序状态。
在 thead 中渲染列头，并根据排序状态显示排序箭头。
在 tbody 中根据排序状态对数据进行排序并渲染。

如果使用其他框架，如Vue，实现思路类似，但语法有所不同：

<template>
  <table>
    <thead>
      <tr>
        <th
          v-for="header in headers"
          :key="header.field"
          @click="handleSort(header.field)"
        >
          {{ header.label }}
          <span v-if="sortBy === header.field">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedData" :key="row.id">
        <td v-for="header in headers" :key="header.field">{{ row[header.field] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    headers: Array,
    data: Array
  },
  data() {
    return {
      sortBy: null,
      sortOrder: 'asc'
    };
  },
  computed: {
    sortedData() {
      if (!this.sortBy) return this.data;
      return [...this.data].sort((a, b) => {
        const valueA = a[this.sortBy];
        const valueB = b[this.sortBy];
        if (this.sortOrder === 'asc') {
          return valueA > valueB ? 1 : -1;
        } else {
          return valueA < valueB ? 1 : -1;
        }
      });
    }
  },
  methods: {
    handleSort(field) {
      if (this.sortBy === field) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortBy = field;
        this.sortOrder = 'asc';
      }
    }
  }
};
</script>

以上代码实现了接收动态表头数据并支持列头点击排序的表格组件，在Vue中使用了 props 接收数据，data 存储状态，computed 计算排序后的数据，methods 处理点击事件。

星途面试题库

面试题：Qwik组件Props高级难度问题

知识考点

面试题答案

实现思路

关键代码片段