React JS에서 그리드 방식으로 데이터를 표시하는 방법은 무엇입니까?

다음 <ul></ul>으로 업데이트 할 수 있습니다 .

<ul className="grid_list">
    {profiles && profiles.length > 0
    ? profiles.map((p, pI) =>
        p.skills.map((s, i) => {
            return <li key={`${pI}${i}`}>{s.name}</li>;
        })
      )
    : null}
</ul>

그리고 grid_listindex.css에 CSS 클래스를 추가하여 <li/>그리드 레이아웃 을 가져옵니다.

.grid_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

최신 정보

ID로 목록을 구분하고 싶다면 이처럼 1 번 <ul>안에 넣어야합니다..map

<div>
      {profiles && profiles.length > 0
        ? profiles.map((p, pI) => (
            <React.Fragment key={`fr${pI}`}>
              <span>{p.fullname}</span>
              <ul className="grid_list" key={pI}>
                {p.skills.map((s, i) => {
                  console.log(`${pI}${i}`);
                  return <li key={`${pI}${i}`}>{s.name}</li>;
                })}
              </ul>
            </React.Fragment>
          ))
        : null}
    </div>

다음과 같은 UI를 제공합니다.

그것이 당신의 생각과 일치합니까?

콘솔을 사용하여 데이터 확인

import profiles from "./data.json";

export default class Skills extends React.Component {
//log your data here
console.log(profiles);

    render(){
        return(
<div>
          {profiles && profiles.length > 0
            ? profiles.map((p, pI) => (
                <React.Fragment key={`fr${pI}`}>
                  <span>{p.fullname}</span>
                  <ul className="grid_list" key={pI}>
                    {p.skills.map((s, i) => {
                      console.log(`${pI}${i}`);
                      return <li key={`${pI}${i}`}>{s.name}</li>;
                    })}
                  </ul>
                </React.Fragment>
              ))
            : null}
        </div>
        );
    }
}

그리고 여기 내 data.json

    [
  {
    "id": 1,
    "fullname": "ABC",
    "skills": [
      { "name": "asp.net mvc" },
      { "name": "css" },
      { "name": "knockout js" },
      { "name": "monitoring" },
      { "name": "ui" },
      { "name": "ajax" },
      { "name": "code review" },
      { "name": "design pattern" },
      { "name": "entity from work" },
      { "name": "git" },
      { "name": "ioc" },
      { "name": "jquery" },
      { "name": "json" }
    ]
  },

  {
    "id": 2,
    "fullname": "edf",
    "skills": [
      { "name": "core java" },
      { "name": "oracle" },
      { "name": "asp.net" },
      { "name": "web api" },
      { "name": "artificial in.." },
      { "name": "c#" },
      { "name": "software eng.." }
    ]
  }
]