react制作查询表格，无接口，直接给数据，加上下拉框筛选

要制作一个查询表格，你可以使用React组件来渲染表格和下拉框。首先，你需要定义一个包含数据的数组，然后将其传递给表格组件。下面是一个简单的实现：

import React, { useState } from 'react';

const data = [
  { name: 'John', age: 25, gender: 'Male' },
  { name: 'Jane', age: 30, gender: 'Female' },
  { name: 'Bob', age: 40, gender: 'Male' },
  { name: 'Alice', age: 35, gender: 'Female' },
];

const Table = ({ data }) => {
  const [genderFilter, setGenderFilter] = useState('All');
  
  const handleGenderFilter = (e) => {
    setGenderFilter(e.target.value);
  };
  
  const filteredData = genderFilter === 'All' ? data : data.filter(item => item.gender === genderFilter);
  
  return (
    <div>
      <label>
        Filter by gender:
        <select value={genderFilter} onChange={handleGenderFilter}>
          <option value="All">All</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </label>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.gender}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Table data={data} />
    </div>
  );
};

export default App;

在这个例子中，我们定义了一个数据数组，包含了每个人的姓名、年龄和性别。然后，我们定义了一个Table组件，它接收一个data属性，用于渲染表格。在组件中，我们使用useState钩子来定义了一个genderFilter状态，用于存储用户选择的性别过滤器。我们还定义了一个handleGenderFilter函数，用于更新genderFilter状态。在组件的返回值中，我们首先渲染了一个下拉框，用于选择性别过滤器。然后，我们使用map函数来遍历过滤后的数据，并渲染表格行。最后，在App组件中，我们将数据传递给Table组件。

这个例子中，我们只是简单地使用数组来模拟数据，如果你有一个实际的数据源，可以将其替换为ajax请求或其他数据获取方式。