Question

我是新来的人。我有一个如下所示的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

在这里我将假设两件事，因为样本数据的格式不正确。

I。对象数组

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>
  )
}

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

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>
  )
}

Answer 2

这是我对CodeSandbox的处理方式。

考虑数据的外观如下：

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

您可以创建一个顶级组件，该组件将data数组作为props，并对其进行迭代以呈现每个节。每个部分都是另一个组件，它将对象文字的值作为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>
  )
}

然后，您可以使用Flexbox从左向右对齐.example-list的子级。完整的CSS解释在CodeSandbox中。

如何渲染反应组件

2 个答案: