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

Question

抱歉，新手 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

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

更新 3

以接受的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>
        );
    }

...但我收到此错误：

TypeError: buttonRight is null

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

Answer 1

问题已更改，没有任何评论或答案。我问了一个新问题并得到了回答

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

How to make multiple items fit on one row in ReactJS?

javascript

reactjs.net

reactstrap