如何从JSON文件渲染数据至React UI？

• 准备JSON数据文件
  创建homes.json，结构匹配目标代码所需字段，示例：

  [
    {
      "image": "https://示例图片地址.jpg",
      "attributes": [
        {"value": "1.5"},
        {"value": ""},
        {"value": "3"},
        {"value": "2"},
        {"value": "1350"}
      ],
      "address": "某城市某街道XX号"
    },
    {
      "image": "https://另一张图片地址.jpg",
      "attributes": [
        {"value": "2.2"},
        {"value": ""},
        {"value": "4"},
        {"value": "3"},
        {"value": "1800"}
      ],
      "address": "某城市某小区XX栋"
    }
  ]
  

• 在React组件中导入JSON
  在你用来展示房源的组件文件顶部添加导入语句：

  import homes from './homes.json';
  

• 编写渲染数据的JSX代码
  把目标代码整合到组件中，若暂时不需要弹窗功能，可先移除onClick事件，示例组件：

  import './HomeList.css';
  import homes from './homes.json';
  
  function HomeList() {
    // 若需要弹窗，后续再实现togglePop函数
    const togglePop = (home) => {
      console.log('选中房源:', home);
    };
  
    return (
      <div className='cards'>
        {homes.map((home, index) => (
          <div className='card' key={index} onClick={() => togglePop(home)}>
            <div className='card__image'>
              <img src={home.image} alt="房源图片" />
            </div>
            <div className='card__info'>
              <h4>{home.attributes[0].value} ETH</h4>
              <p>
                <strong>{home.attributes[2].value}</strong> 卧室 |
                <strong>{home.attributes[3].value}</strong> 浴室 |
                <strong>{home.attributes[4].value}</strong> 平方英尺
              </p>
              <p>{home.address}</p>
            </div>
          </div>
        ))}
      </div>
    );
  }
  
  export default HomeList;
  

• 添加基础样式
  创建HomeList.css文件，添加样式让布局更接近目标效果：

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  .card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: box-shadow 0.2s;
  }
  .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .card__info {
    padding: 15px;
  }
  .card__info h4 {
    margin: 0 0 10px;
    color: #2d3748;
  }
  .card__info p {
    margin: 5px 0;
    color: #718096;
  }
  

• 在主页面使用组件
  在App.js中导入并使用HomeList组件：

  import HomeList from './HomeList';
  
  function App() {
    return (
      <div className="App">
        <HomeList />
      </div>
    );
  }
  
  export default App;
  

内容的提问来源于stack exchange，提问作者Nguyễn Trung Nguyện