如何在 props 数组中水平显示我的值
在我的 React 项目中，我必须从父组件中获取一个数组并将其水平打印在子组件（PrintHorizontal）中。
我正在使用 map 函数来垂直呈现我的值，所以我写了 join 来组合数组值，但我得到了不同的值。打印是我的子组件
props.values=[
{
id:1,
x:1
},
{
id:1,
x:1
}
]
PrintHorizontal Component:
const PrintHorizontal = props => {
let list=props.values.map(value => {
return <Print key={value.id} data={value.x} />
});
return (
<div>
{list.join(' , ')}
</div>
)
}
Print Component:
const Print = props => {
return (
<div>
<Avatar>{props.data}</Avatar> //Avatar is a component imported from materialUI
</div>
)
}
我希望运行值会水平打印，而不是我得到 [object Object],[object Object]
倚天杖浏览 133回答 2
2回答
-
一只名叫tom的猫
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> main = () => { const arr = [1, 2, 3, 4]; const list = arr.map(item => { const node = document.createElement('span'); node.innerHTML = item * 2; node.style.margin = '20px'; return node; }); list.forEach(element => { document.getElementById("target").appendChild(element) }) } </script></head><body onload="main()"> <div id="target"></div></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript