我是 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"] },
]
您可以在实现 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>
)
}
关于javascript - 如何渲染 react 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57335265/