我在React中有一个应用程序,试图从JSON文件中读取数据。 JSON文件的格式如下:
[
{
"name": "Max",
"age": "21",
},
{
"name": "Sam",
"age": "18",
}
........
]
我已成功读取正确的数据并将其显示在屏幕上,如下所示:
function foo(){
const styling = css`
font-size: 30px;
`;
return(
<div>
{people.map((person, i) => <Format key={i} {...person} css={styling}/>)}
</div>
);
}
尽管所有信息正确显示在屏幕上,但样式并未应用到每个人。我该如何更改?
编辑
格式部分:
function Format({name, age}){
return (
<div>
<h1>{name}</h1>
<h2>{age}</h2>
</div>
);
}
最佳答案
function Format({name, age, css}){
return (
<div css={css}>
<h1>{name}</h1>
<h2>{age}</h2>
</div>
);
}
您将样式传递给了您的组件,但没有在子组件中使用它们
并且最好不要将idx用作密钥。以下文章解释了原因。
https://reactjs.org/docs/lists-and-keys.html
如果名称是唯一的,则可以将每个项目的名称传递给映射的子代。