下面是一个基于 React 和 Bootstrap 的示例，演示按类别过滤项目列表的方法。

首先，我们需要创建一个'筛选器”组件，它包含一个下拉列表，可以选择要过滤的类别。该组件将通过回调函数将所选类别传递给主应用程序组件。下面是筛选器组件的代码示例：

import React from 'react';
import PropTypes from 'prop-types';

const Filter = ({ categories, onCategoryChange }) => {
  const handleChange = (event) => {
    onCategoryChange(event.target.value);
  };

  return (
    

      Category:
      
        All
        {categories.map((category) => (
          
            {category}
          
        ))}
      
    
  );
};

Filter.propTypes = {
  categories: PropTypes.arrayOf(PropTypes.string).isRequired,
  onCategoryChange: PropTypes.func.isRequired,
};

export default Filter;

在主应用程序组件中，我们需要保存当前选定的类别并根据该类别过滤项目列表。以下是主组件的示例代码：

import React, { useState } from 'react';
import projectsData from './data';
import Filter from './Filter';

const App = () => {
  const categories = ['All', 'Web', 'Mobile', 'Desktop'];
  const [selectedCategory, setSelectedCategory] = useState('');

  const handleCategoryChange = (category) => {
    setSelectedCategory(category);
  };

  const filteredProjects = selectedCategory
    ? projectsData.filter((project) => project.category === selectedCategory)
    : projectsData;

  return (
    

      
      

        {filteredProjects.map((project) => (
          

            
{project.title}
            
{project.description}