React中如何单独渲染JSON数组中的各类元素？

第一步：定位id为abc的目标对象 #

从传入的JSON数据数组里，直接用Array.find()筛选出id匹配的对象：

const targetHouse = housingData.find(house => house.id === 'abc');

如果找不到匹配的对象，记得加个判断逻辑，比如返回“未找到数据”的提示，避免后续渲染报错。

第二步：单独渲染pictures数组 #

之前所有URL拼接成字符串的问题，是因为直接把数组作为img的src属性——React会自动把数组转为字符串。解决方法是用map()遍历数组，为每个URL生成独立的img标签：

<div className="pictures-container">
  {targetHouse.pictures.map((picUrl, index) => (
    <img
      key={index}
      src={picUrl}
      alt={`房屋图片${index + 1}`}
    />
  ))}
</div>

注意给每个img加唯一的key属性，这里用index是临时方案，如果图片URL本身唯一或者有专属ID，用那个更稳妥。

第三步：单独渲染tags数组 #

标签显示为一行的问题同理，直接输出数组会被转为字符串，用map()遍历生成独立的<li>即可：

<div className="tags-container">
  <h3>标签</h3>
  <ul>
    {targetHouse.tags.map((tag, index) => (
      <li key={index}>{tag}</li>
    ))}
  </ul>
</div>

完整组件示例 #

import React from 'react';

const HousingPage = ({ housingData }) => {
  const targetHouse = housingData.find(house => house.id === 'abc');

  if (!targetHouse) {
    return <div>未找到id为abc的房屋数据</div>;
  }

  return (
    <div className="housing-page">
      <h2>{targetHouse.title}</h2>
      <div className="pictures-container">
        {targetHouse.pictures.map((picUrl, index) => (
          <img
            key={index}
            src={picUrl}
            alt={`房屋图片${index + 1}`}
            className="housing-pic"
          />
        ))}
      </div>
      <div className="tags-container">
        <h3>标签</h3>
        <ul>
          {targetHouse.tags.map((tag, index) => (
            <li key={index} className="tag-item">
              {tag}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default HousingPage;

内容的提问来源于stack exchange，提问作者8bitmd