Javascript 如何渲染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呈现上述最终结果

以下是我的方法

---

考虑到您的数据如下所示：

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

您可以创建一个顶级组件，该组件将

数据

数组作为

道具

并对其进行迭代以渲染每个部分。每个部分都是另一个组件，它将对象文本的值作为

props

。以下是一个例子：

// This is your top-level component. It iterates over the data array.
const App = () => {
  return (
    <div className="App">
      {data.map(element => (
        <List key={element.key} 
              title={element.key} 
              values={element.value} 
        />
      ))}
    </div>
  )
}

// This is your subcomponent. This one generates the actual HTML.
const List = props => {
  const { title, values } = props;

  return (
    <div className="example-list">
      <div>{title}</div>
      <ul>
        {values.map(value => (
          <li>{value}</li>
        ))}
      </ul>
    </div>
  )
}

//这是您的顶级组件。它在数据数组上迭代。
常量应用=（）=>{
返回(
{data.map（元素=>(
))}
)
}
//这是您的子组件。这一个生成实际的HTML。
常量列表=道具=>{
常量{title，values}=props；
返回(
{title}

{values.map（值=>(
{value}
))}

)
}

---

然后，您可以使用Flexbox将

示例列表的子项从左到右对齐。完整的CSS解释在CodeSandbox中。
我在这里假设两件事，即数据格式正确，因为示例数据格式不正确

I.对象数组

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

const data = {
  Visa: ["10", "20", "30"],
  Other: ["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 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>
  )
}

您可以在实现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 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>
  )
}

const-App=（）=>{
返回(
{Object.entries（data.map）（（el，key）=>(
{el[0]}
{el[1].map（（i，key）=>(
{i}
)}
))}
)
}
您希望实现的JSX标记是什么？正如我在下面所示，我希望键显示为第一行值，然后仅显示连续行中的值，直到呈现所有值。然后从新闻键和值开始。请注意，您的输入数据格式非常无效。您为什么认为它是inavlid？它不是JSON@It'sNotMe。