回答这个问题

构建可重用、可链接的过滤器组件的最“react”方式是什么？

我建议使用钩子来分离显示和数据逻辑。将所有与数据相关的逻辑移动到一个钩子中，并将该钩子导入到react组件中。

// useProducts.js
const useProducts = () => {
  const [products, setProducts = useState([]);
  const [filters, setFilters] = useState({}); // eg. filters = { size: 'large', availability: 'instock' }

  // Get all products on initial load
  useEffect(() => {
    fetch(....).then(response => setProducts(response.data));
  }, []);

  // function to set filter.
  const setFilter = (name, value) => {
    setFilters({ ...filters, [name]: value });
  }

  // Loop filters and filter product 
  const filteredProducts = [...products];
  for (const [key, value] of Object.entries(filters)) {
    // Get list of products from somewhere.
    filteredProducts = filterProducts.filter(p => p[key] === value);
  }

  return [filteredProducts, { setFilter }];
}

// Product List
import React from 'react';
import useProducts from './useProducts';

const ProductList = (props) => {
  const [products, { setFilter }] = useProducts();

  return (
    <div>
      <div className="toolbar">
        <NameFilter onChange={value => setFilter('name', value)} />
        <SizeFilter onChange={value => setFilter('size', value)} />
        <AvailabilityFilter onChange={value => setFilter('availability', value)} />
      </div>
      <div>
        {products.map(p => <ProductItem {...p} />}
      </div>
    </div>
  );
}

此外，您甚至可以通过在过滤器组件本身中导入 { setFilter } 来对其进行更多module化。您可以从 ProductList 中删除“onChange”。

const NameFilter = () => {
  const [, { setFilter }] = useProducts();
  return (
    <input
      type="text"
      onChange={e => setFilter('name', e.target.value)}
    />
  );
}


// And now, we can remove onChange from each filter in Product List component
<div>
  <div className="toolbar">
    <NameFilter />
    <SizeFilter />
    <AvailabilityFilter />
  </div>
  <div>
    {products.map(p => <ProductItem {...p} />}
  </div>
</div>

*注：上面的代码只是伪代码，它只是展示了这个想法。

条件过滤有什么问题吗？

const searchResults =(text, size) => {
    let filteredProducts = eventsFromAPI; // array of products as input

    filteredProducts = text ? filteredEvents.filter(product => fullTextFilter(text)) : filteredProducts;
    filteredProducts = size ? filteredEvents.filter(product => sizeFilter(product)) : filteredProducts
    filteredProducts = filteredEvents.filter(product => availabilityFilter(product));

    return filteredProducts;
};

大小可以是布尔值。

也可以...（伪代码）

const Search =({filter = []}) => { 
    let filteredProducts = eventsFromAPI; // array of products as input

    filteredProducts = filter.indexOf('something') > -1  ? filteredEvents.filter(product => fullTextFilter(text)) : filteredProducts;
    filteredProducts = filter.indexOf('size') > -1 ? filteredEvents.filter(product => sizeFilter(product)) : filteredProducts
    filteredProducts = filteredEvents.filter(product => availabilityFilter(product));

    return filteredProducts; 
};

然后你可以调用search({ filter: ['size', 'availability']})或者如果你把它放到一个组件中<Search filter={['size', 'availability']} products={products} />

甚至

const Search = ({ size = null, text = '', availability = true}) => {
   ... conditionally filtering

   return //whatever product u render
}