如何单独渲染 JSON 数组中的各个项目？

Question

我的 JSON 文件如下所示：

{
        "id": "abc",
        "title": "Title1",
        "cover": "https://example.tld/pic0.jpg",
        "pictures": [
            "https://example.tld/pic1.jpg",
            "https://example.tld/pic2.jpg",
            "https://example.tld/pic3.jpg",
            "https://example.tld/pic4.jpg",
            "https://example.tld/pic5.jpg"
        ],
        "description": "Lorem ipsum...",
        "host": {
            "name": "John Appleseed",
            "picture": "https://example.tld/pic6.jpg"
        },
        "rating": "5",
        "location": "Paris",
        "equipments": [
            "1",
            "2",
            "3",
        ],
        "tags": [
            "Tag1",
            "Tag2"
        ]
    },

这个数组下面还有更多，具有完全相同的结构。

在 React 中，我尝试单独渲染每个图像，并将每个标签放在自己的

<li>

中。 为此，我创建了一个元素：

export const HousingPage = ({pictures, title, location, host, hostpic, tags, desctext, equiptext}) => {
    return (
        <div>
            <img src={pictures}/>
            <h1>{title}</h1>
            <p>{location}</p>
            <p>{host}</p>
            <img src={hostpic} />
            <li>{tags}</li>
            <div>
                <h2>Description</h2>
                <p>{desctext}</p>
            </div>
            <div>
                <h2>Équipements</h2>
                <p>{equiptext}</p>
            </div>
        </div>
    )
}

然后使用

const data = require("../datas/logements.json")

在 App.js 中导入 JSON 并添加元素：

<HousingPage pictures={housing.pictures} location={housing.location title={housing.title} ... />

但是，标签呈现为单行，并且呈现的单个图片具有一个字符串，其中每个图像 URL 作为 src。 例如，如何选择数组中 ID 为“abc”的所有图片并单独渲染它们？标签也有同样的问题。

Answer 1

这个：

<img src={pictures}/>

尝试使用 数组 作为

src

的值。

src

只需是一个 URL。要显示多个图像，请使用多个

<img>

元素。例如：

{ pictures.map(p => <img src={p}/>) }