javascript - 如何渲染 react 组件

Question

我是 React 新手。我有一个如下所示的 javascript 映射

{
  {
   key : "Visa",
value : ["10", "20", "30"]   
},

{
   key : "Other",
value : ["30", "40", "50"]   
},
}

我必须使用上面的方法渲染一个 react 组件，如下所示:

-------------------------
Visa                10 
                    20
                    30

------------------------
Other               30
                    40
                    50
------------------------

我无法使用 css 和 JSX 呈现上述最终结果。

Answer 1

由于样本数据格式不正确，我将在此处假设数据格式正确的两件事。

我。对象数组

const data = [
  { key : "Visa", value : ["10", "20", "30"] },
  { key : "Other",value : ["30", "40", "50"] },
]

您可以在实现 Flexbox 时映射数据以对齐子项。

const App = () => {
  return (
    <div className="App">
      {data.map((el, key) => (
         <div key={key} className="item">
           <div className="item-title">{el.key}</div>
           <div className="item-values">
             {el.values.map((i, key) => (
               <div>{i}</div>
             )}
           </div>
         </div>
      ))}
    </div>
  )
}

二。具有多个键和值的单个对象

const data = {
  Visa: ["10", "20", "30"],
  Other: ["30", "40", "50"] 
},

您可以在实现 Flexbox 时映射数据以对齐子项。

const App = () => {
  return (
    <div className="App">
      {Object.entries(data).map((el, key) => (
         <div key={key} className="item">
           <div className="item-title">{el[0]}</div>
           <div className="item-values">
             {el[1].map((i, key) => (
               <div>{i}</div>
             )}
           </div>
         </div>
      ))}
    </div>
  )
}