如何在 ReactJS 中使多个项目适合一行？

如何解决如何在 ReactJS 中使多个项目适合一行？

抱歉，新手 React 开发人员。我有一个呈现特色产品的 React 组件：

return (
        <CardDeck>
            {items && items.map(item =>
                <Card key={item.itemNumber} width="100px">
                    <CardHeader tag="h3">Featured</CardHeader>
                    <CardImg top width="75%" className="card-picture" src={"data:image/png;base64," + item.images[0]?.ImageData} id={item.itemNumber + "Img"} alt={item.itemNumber} />
                    <CardBody>
                        <CardTitle tag="h5">{item.itemNumber}</CardTitle>
                        <CardSubtitle tag="h6" className="mb-2 text-muted">{item.categoryName}</CardSubtitle>
                        <CardText>{item.itemDescription}</CardText>
                    </CardBody>
                    <CardFooter className="text-muted">{formatter.format(item.price)}</CardFooter>
                    <Button>Order</Button>
                </Card>
            )}                
        </CardDeck>
    );

它将所有七个项目塞满一行。

如何使用左右滚动按钮仅显示三个或四个项目，或者如何显示多行且每行最多三个或四个项目？

更新

我想出了多行。我将 CardDeck 换成 CardColumns 并让 BootStrap 处理它。我仍然想知道如何进行水平滚动。

更新 2

我以 This SO Answer 为例进行了水平滚动。它在组下方放置了一个滚动条。那么现在，如何让它使用左右按钮并隐藏滚动条？

更新 3

以 this 接受的 SO 答案为例，我将文档更改为：

    render() {
        const buttonRight = document.getElementById('slideRight');
        const buttonLeft = document.getElementById('slideLeft');

        buttonRight.onclick = function () {
            document.getElementById('container').scrollLeft += 20;
        };

        buttonLeft.onclick = function () {
            document.getElementById('container').scrollLeft -= 20;
        };

        return (
            <div>
                <button id="slideLeft" type="button">Slide left</button>
                <CardGroup id="container" className="card-group-scroll">
                    {items && items.map(item =>                       
                            <Card key={item.itemNumber} tag="a" onClick={() => handleClick()} style={{ cursor: "pointer" }}>
                                <CardHeader tag="h3">Featured</CardHeader>
                                <CardImg top className="card-picture" src={"data:image/png;base64," + decompresstoBase64(item.images[0]?.compressedImageData)} id={item.itemNumber + "Img"} alt={item.itemNumber} />
                                <CardBody className="card-body">
                                    <CardTitle tag="h5">{item.itemNumber}</CardTitle>
                                    <CardSubtitle tag="h6" className="mb-2 text-muted">{item.categoryName}</CardSubtitle>
                                    <CardText className="card-description">{item.itemDescription}</CardText>
                                </CardBody>
                                <CardFooter className="text-muted">{formatter.format(item.price)}</CardFooter>
                            </Card>   
                    )}                
                </CardGroup>
                <button id="slideRight" type="button">Slide right</button>
            </div>
        );
    }

...但我收到此错误：

类型错误：buttonRight 为空

...在这一行buttonRight.onclick = function () {

解决方法

问题已发生变化，没有评论或答案。我提出了一个新问题并得到了回答 here