如何水平化反应js组件？

Question

我创建了应用程序来映射页面上的所有卡片组件。但是组件是垂直显示的。我需要每行显示 3 个组件。我怎么能这样显示呢？这是我的代码。

 const[item, setItem] = useState([]);

function addItem(newItem){ //This addItem Part is working.
    setItem(prevItems =>{
        return [...prevItems, newItem]
    });
}

return(<div className="container">
        <div className="row">
        <div className="col-lg-4" style={{cursor: "pointer"}}>
            <AddCard />
        </div>

        <div style={{cursor: "pointer"}}>

            {item.map((items, index)=>{
                return(
                    <div className="col-lg-4" >
                        <ItemCard
                            key={index}
                            id={index}
                            title={items.title}
                            description={items.description}
                        />
                    </div>
                )
        })}
        </div>

        </div>)

Answer 1

您可以在容器上使用 display:"flex"

 const[item, setItem] = useState([]);

function addItem(newItem){ //This addItem Part is working.
    setItem(prevItems =>{
        return [...prevItems, newItem]
    });
}

return(<div className="container">
        <div className="row">
        <div className="col-lg-4" style={{cursor: "pointer"}}>
            <AddCard />
        </div>

        <div style={{cursor: "pointer", display:"flex"}}>

            {item.map((items, index)=>{
                return(
                    <div className="col-lg-4" >
                        <ItemCard
                            key={index}
                            id={index}
                            title={items.title}
                            description={items.description}
                        />
                    </div>
                )
        })}
        </div>

        </div>)

Answer 2

使用 flexboxes，因为 React 允许您创建组件，因此我们可以像使用 flexboxes 的 HTML 元素一样设置它们的样式。

示例：

.flexbox-container {
    display: flex;
    flex-direction: row;
}

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

如何水平化反应js组件？

How to horizontalize react js component?

javascript

css

reactjs

react-bootstrap

react-hooks