react遍历筛选框列表

在React中，如果你想遍历并操作一个筛选框（通常是一个数组或对象列表）的列表，你可以使用循环（如`for...of`, `map`, `forEach`, 或者`Array.prototype.filter`等方法）。这里以数组为例：

假设你有一个筛选条件数组 `filters` 和一个待筛选的数据源 `data`，你想根据筛选条件过滤数据：

const filters = ['category', 'price', 'rating'];
const data = [
  { id: 1, category: 'A', price: 50, rating: 4 },
  { id: 2, category: 'B', price: 75, rating: 3 },
  { id: 3, category: 'A', price: 90, rating: 5 },
];

function filterData(data, filters) {
  return data.filter(item => filters.every(filter => item.hasOwnProperty(filter)));
}

const filteredData = filterData(data, filters);

// 现在filteredData就是只包含满足所有筛选条件的数据

// 如果你想展示筛选框和结果，可以这样渲染：
{filteredData.length > 0 ? (
  <ul>
    {filteredData.map((item, index) => (
      <li key={index}>
        {item.category}, Price: {item.price}, Rating: {item.rating}
      </li>
    ))}
  </ul>
): (
  <p>No items match the filters.</p>
)}

在这个例子中，我们先使用`filterData` 函数根据筛选条件筛选出符合条件的数据，然后再用`map` 方法遍历并展示每一条数据。