如何将JSON对象放入JSX中?

Question

我有一个json数组，其中包含一些信息:

[
{

"id": 1,
"imageUrl": "./img1.png",

},
{

"id": 2,
"imageUrl": "./img2.png",


}
]

我试图做一个类，其中的元素排序，并添加必要的链接到src，但从JSON的信息不放入JSX。

class Paintings extends Component  {
render(){
return(
<ul>
{
paintings.map((s) => {
return (  
<div>
<img src={s.imageUrl} alt={s.id} />
</div>
)  
})  
}
</ul>
)

Answer 1

这个问题比这里的图像更一般。在JSX中导入和循环一个JSON对象。

你的代码中有一些语法错误，我修复了它们，并分享了一个在线编辑器实现，让你看看。

将json保存在一个文件中，并将该文件导入到react代码中，然后映射json对象。

对于图像位置，虽然这不是推荐的方法，我认为你应该把你的图像放在公共文件夹下，并确保你的json文件有正确的路径。

样本JSON文件我已经结构化，供您参考:

[
{
"id": 1,
"imageUrl": "image1.png"
},
{
"id": 2,
"imageUrl": "image2.png"
}
]

那么你应该能够使用下面的代码来生成它。

import React, { Component } from "react";
import Painting from "./Painting";
class Paintings extends Component {
render() {
return (
<ul>
{Painting.map(({ id, imageUrl }) => (
<div key={id}>
<img src={imageUrl} alt={id} />
</div>
))}
</ul>
);
}
}
export default Paintings;

这是一个基本的实现供您查看，我们可以映射和查看项目。我已经添加了一些示例图像，请注意json文件以及它如何准备基于文件路径映射JSX图像对象。

https://codesandbox.io/s/react-json-into-jsx-19gj1w