Reactjs 对JSON数据进行排序，然后将其过滤到单独的组件中

我正试图弄明白其中的逻辑，我有点被卡住了。我有一个像这样的对象数组

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

有几种不同的类型，总共有九种。村庄、城镇、城市等。我试图为这九种类型中的每种类型创建一个组件，然后将与该特定类型匹配的所有对象过滤到相应的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>
      )

const stuff=data.map（（位置）=>
{location.name}
)

您可以创建一个对象，将每种类型映射到相应的组件。类似这样的方法会奏效：

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}
    />
  );
});

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

const数据=[
{
“id”：5，
“名称”：“摩尔镇”，
“lat”：15，
“液化天然气”：18.5，
“类型”：“村庄”
},
{
“id”：783，
“名称”：“摩尔镇”，
“lat”：3，
“液化天然气”：18.5，
“类型”：“村庄”
},
{
“id”：75，
“名称”：“摩尔镇”，
“lat”：33，
“液化天然气”：8.55，
“类型”：“城镇”
},
{
“id”：43，
“名称”：“摩尔镇”，
“lat”：33，
“液化天然气”：15，
“类型”：“城市”
},
{
“id”：443，
“名称”：“摩尔镇”，
“lat”：35，
“液化天然气”：725，
“类型”：“城市”
},
{
“id”：4543，
“名称”：“摩尔镇”，
“lat”：76，
“液化天然气”：2，
“类型”：“城市”
}
]
consttypes=[…新集合（data.map（loc=>loc.type））]
console.log（types）

是否要按类型切换标记器组件、工具提示等，或者是否要有一个包含这些组件的组件？只是一个封装每种类型的组件。因此，所有类型为“城市”的标记将位于图层控制组件中，所有类型为“村庄”的标记将位于单独的图层控制组件中，等等。谢谢！我将尝试使用这个…可能需要重构一点，因为它是react传单库中已经存在的组件。答案很好-我忘记了Set。我需要不断地修改代码，因为LayersControl是一个react传单组件，它在页面上呈现了九次，但是我想我可以在您的指导下解决这个问题。谢谢嘿！我花了几个小时试图弄明白这一点，但仍然遇到问题。我在这里的JSFIDLE中发布了我的代码：最上面的一个是我的单张地图代码，它是父窗口，第二个窗口是应该呈现每个图层组的覆盖组件（总共九个，共九个类型）。我真的很感激！我只是很快检查了你的小提琴。类组件的

render

函数不接收任何道具，要访问道具，请使用

this.props

。此外，还将React js组件放入JSFIDLE的HTML部分

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

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