将 JSON 数据排序然后过滤成单独的组件

Question

我正在尝试找出其中的逻辑，但有点卡住了。我有一组看起来像这样的对象。

    {
        "id": 5,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 18.5,
        "type": "village"
    }

有几种不同的类型，一共九种。 Village、Town、City 等。我正在尝试为这九种类型中的每一种创建一个组件，然后将与该特定类型匹配的所有对象过滤到适当的 LayerControl 组中。

这是我目前所拥有的，但这只是渲染了标记组件，但没有考虑类型。

  const stuff = data.map((location) =>
        <Marker key={location.id} position={[location.lat, location.lng]} icon= 
           {locationIcon}>
          <Tooltip permanent direction="bottom" opacity={.6}>
            {location.name}
          </Tooltip>
        </Marker>
      )

Answer 1

您可以创建一个对象来将每种类型映射到相应的组件。这样的事情会起作用：

const LayerVillage = ({ position, name }) => (
  <Marker position={position} icon={locationIcon}>
    <TooltipComponent permanent direction="bottom" opacity={0.6}>
      {name}
    </TooltipComponent>
  </Marker>
);

const layerComponentsByType = {
  village: LayerVillage,
  town: LayerTown
};

const stuff = data.map(location => {
  const LayerControl = layerComponentsByType[location.type];
  return (
    <LayerControl
      key={location.id}
      position={[location.lat, location.lng]}
      name={location.name}
    />
  );
});

另一种可能是：

    <LayerControl
      key={location.id}
      {...location}
    />

通过这种方式，您将收到位置对象键值对作为属性。

此外，您可以有一个默认组件，因为 location.type 不能是属性的 layerComponentsByType:

  const LayerControl = layerComponentsByType[location.type] || DefaultLayerControl;

Answer 2

您可以使用 Set 来查找数组中的所有唯一类型：

const data = [
    {
        "id": 5,
        "name": "Mole's Town",
        "lat": 15,
        "lng": 18.5,
        "type": "village"
    },
    {
        "id": 783,
        "name": "Mole's Town",
        "lat": 3,
        "lng": 18.5,
        "type": "village"
    },
    {
        "id": 75,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 8.55,
        "type": "town"
    },
    {
        "id": 43,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 15,
        "type": "city"
    },
    {
        "id": 443,
        "name": "Mole's Town",
        "lat": 35,
        "lng": 725,
        "type": "city"
    },
    {
        "id": 4543,
        "name": "Mole's Town",
        "lat": 76,
        "lng": 2,
        "type": "city"
    }
]

const types = [...new Set(data.map(loc => loc.type))]

console.log(types)

一旦你拥有它们，在你的渲染函数中，将它们与你的 LayerControl 映射，同时过滤每个具有相同类型的位置并将其作为道具发送：

types.map(type => <LayerControl key={type} locations={data.filter(loc => loc.type === type)}/>)

然后在您的 LayerControl 渲染中，将每个接收到的位置映射到您在问题中提供的代码：

this.props.locations.map(({id, lat, lng, name}) => //Deconstructing every location to make your code more readable
    <Marker key={id} position={[lat, lng]} icon=
        {locationIcon}>
        <Tooltip permanent direction="bottom" opacity={.6}>
            {name}
        </Tooltip>
    </Marker>
)

将 JSON 数据排序然后过滤成单独的组件

Sorting and then filtering JSON data into separate components

components

filter

leaflet

reactjs

react-leaflet