Question

在我的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>
    )
}

我希望运行值可以水平打印，而不是 [对象对象]，[对象对象]

Answer 1

您的Print组件包裹在div中，而且看来Avtar组件添加了它自己的div，因此您可以简单地从打印中返回Avtar，并使用display：flex将其水平对齐到父div。

const PrintHorizontal = props => {
return (
    <div className="horizontal">
        { props.values.map(value => {
            <Print key={value.id} data={value.x} />
        })}
    </div>
)
}

const Print = props => {
    return (
            <Avatar>{props.data}</Avatar>  //Avatar is a component imported from materialUI
    )
}

在您的CSS文件中

.horizontal {
    display: flex;
    align-item: center;
}

Answer 2

<!DOCTYPE html>
<html lang="en">

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

如何在道具数组中水平显示我的值

2 个答案: