如何在可滚动列表中显示文本和图像？

import React from 'react';

const data = [
  { text: 'Item 1', image: 'image1.jpg' },
  { text: 'Item 2', image: 'image2.jpg' },
  { text: 'Item 3', image: 'image3.jpg' },
  // ...
];

const ListItem = ({ item }) => (
  <div className="list-item">
    <img src={item.image} alt="Item" />
    <span>{item.text}</span>
  </div>
);

const ScrollableList = () => (
  <div className="scrollable-list">
    {data.map((item, index) => (
      <ListItem key={index} item={item} />
    ))}
  </div>
);

export default ScrollableList;

.scrollable-list {
  overflow: auto;
  height: 300px;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.list-item img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.list-item span {
  font-size: 16px;
}