要按类别筛选项目，可以使用React来实现。以下是一个示例解决方案：

1. 创建一个名为Projects的React组件，用于显示项目列表和类别筛选器。

import React, { useState } from 'react';

const Projects = () => {
  const [category, setCategory] = useState('all');
  const [projects, setProjects] = useState([
    { id: 1, name: 'Project 1', category: 'web' },
    { id: 2, name: 'Project 2', category: 'mobile' },
    { id: 3, name: 'Project 3', category: 'web' },
  ]);

  const handleCategoryChange = (event) => {
    setCategory(event.target.value);
  };

  const filteredProjects = category === 'all'
    ? projects
    : projects.filter(project => project.category === category);

  return (
    

      
Projects
      
        All
        Web
        Mobile
      
      

        {filteredProjects.map(project => (
          
{project.name}
        ))}
      
    
  );
};

export default Projects;

2. 在应用的根组件中使用Projects组件。

import React from 'react';
import Projects from './Projects';

const App = () => {
  return (
    

      
My App
      
    
  );
};

export default App;

在上面的示例中，Projects组件包含一个下拉选择框，用于选择项目的类别。handleCategoryChange函数用于更新category状态。根据选定的类别，使用filter函数从projects数组中筛选出相应的项目，并将结果存储在filteredProjects变量中。最后，使用map函数将筛选后的项目渲染为项目列表。

这是一个简单的示例，你可以根据自己的需求进行更改和扩展。