我在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

如果名称是唯一的,则可以将每个项目的名称传递给映射的子代。

10-05 20:58
查看更多