多层反应-同一标记
多层反应-同一标记
提问于 2021-04-09 10:34:24
如何在多层反应传单中添加相同的标记？
例如，：
我有一个应用程序来搜索带有反应传单的餐馆，每个标记都是不同的餐厅。我想有一个LayerControl来过滤他们的类型和等级(1.5星)。
我可以有一个LayerControl.Overlay来过滤类型(例如，自助餐)，但我也想按等级进行过滤。如果我有一个餐厅类型=‘自助餐’和rating=4，我如何做才能显示标记时，自助餐类型和4星级评级被检查。
这是我的当前代码，它只按类型过滤。
我用的是反应传单v3。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-14 04:16:08
创建各种层次组来管理过滤器时使用的方法并不是最好的方法。我采取了另一种方法。
使用所需的过滤器创建一个状态对象
在应用程序中，创建一个包含潜在过滤器的状态变量。我们将最初将其设置为包含所有选项：
const restaurantTypes = ["Family Style", "Buffet", "Fast Food", "Cafe"];
const ratings = [1, 2, 3, 4, 5];
function App() {
const [filters, setFilters] = useState({
restaurantTypes,
ratings
});
...
}自定义过滤组件
我选择创建一个自定义组件，它基本上与传单层控制完全相同，但没有任何功能。您可以在这个答案的末尾查看沙箱，但是它所做的只是管理我们刚刚定义的filters状态变量。以下是一个简短的总结：
const FilterControl = ({ filters, setFilters }) => {
return (
<div>
<h3>Type</h3>
{restaurantTypes.map((type) => (
<label>
<input
type="checkbox"
checked={filters.restaurantTypes.includes(type)}
onClick={(e) => {
if (filters.restaurantTypes.includes(type)) {
setFilters((prevFilters) => ({
...prevFilters,
restaurantTypes: prevFilters.restaurantTypes.filter(
(f) => f !== type
)
}));
} else {
setFilters((prevFilters) => ({
...prevFilters,
restaurantTypes: [...prevFilters.restaurantTypes, type]
}));
}
}}
/>
<span>{type}/span>
</label>
))}
<h3>Rating</h3>
{ratings.map((rating) => (
// same as above but for ratings
))}
</div>
);
};因此，现在您的FilterControl可以灵活地管理filters的状态。
根据过滤器过滤标记
现在您所要做的就是在restaurants数据集上映射，并且只呈现type和rating位于当前filters中的标记。
function App() {
const [filters, setFilters] = useState({
restaurantTypes,
ratings
});
return (
<MapContainer ... >
<TileLayer ... />
<FilterControl filters={filters} setFilters={setFilters} />
{restaurants.map((restaurant) => {
if (
filters.restaurantTypes.includes(restaurant.type) &&
filters.ratings.includes(restaurant.rating)
) {
return <Marker position={restaurant.coordinates} />
}
return null;
})}
</MapContainer>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67019499
复制相关文章
相似问题
腾讯云开发者
