React Bootstrap响应式布局搭配React Hooks与Alan AI未达预期问题求助

问题原因梳理 #

1. 卡片布局逻辑错误：你在遍历每个商品的时候，都给单个商品套了完整的<Container>、<Row>、<Col>结构，等于每个卡片单独占一行，自然会全部垂直堆叠
2. flex属性写错：<CardDeck>上的flexDirection: 'col'是无效值，正确的纵向属性是column，但你要横向排列卡片不需要修改这个属性，CardDeck默认就是横向排列的
3. Alan按钮重叠：你给Alan按钮设置了top:15px固定定位在页面左上角，页面内容没有预留顶部边距，自然会和按钮重叠
4. 页面宽度不够：默认的reactstrap <Container>是有最大宽度限制的，要占满整个浏览器窗口需要加fluid属性

具体修改方案 #

第一步：修改App.js代码 #

删除多余的RenderMenuItem组件，把容器、行结构挪到遍历外面，同时给外层容器加顶部内边距避开Alan按钮：

import { Card, Alert, CardImg, CardText, CardTitle, BreadcrumbItem, Breadcrumb, Row, Col, CardDeck, Jumbotron, Container } from 'reactstrap';
import { useState, useEffect } from "react";
import alanBtn from '@alan-ai/alan-sdk-web'
import { menuItems } from './shared/Myitems.js';
import CardJS from './CardJS.js'

function App() {
  const [products, setProducts] = useState([])
  const [cart, setCart] = useState([])

  useEffect(() => {
    alanBtn({
      top: "15px",
      left: "15px",
      key: "cae166fc0c628179186385ada308798d2e956eca572e1d8b807a3e2338fdd0dc/stage",
      onCommand: (commandData) => {
        if (commandData.command === "getMenu") {
          setProducts(commandData.data)
          console.log(commandData)
        } else if (commandData.command === "addToCart") {
          setCart((currentCart) => [...currentCart, commandData.data])
        }
      },
    })
  }, [])

  return (
    {/* 加fluid属性占满全屏，pt-5加顶部内边距避开Alan按钮 */}
    <Container fluid className="pt-5 App">
      {/* 一行3列的设置放在外层Row上，md屏幕以上一行3个，移动端一行1个，g-4设置列间距 */}
      <Row xs={1} md={3} className="g-4">
        {products.map((product) => (
          <Col key={product.name}>
            <CardJS product={product}/>
          </Col>
        ))}
      </Row>
      <div className="mt-4">
        购物车:
        {cart.map((cartItem) => (
          <div key={cartItem.name}>
            {cartItem.name} - {cartItem.price} - {cartItem.category}
          </div>
        ))}
      </div>
    </Container>
  )
}

export default App;

第二步：修改CardJS.js代码 #

删除卡片上多余的列类名，列控制已经放在外层的Col组件上了：

import { Card, CardImg, CardText, CardTitle } from 'reactstrap';

export default function CardJS({product}) {
  return (
    <Card>
      <CardImg width="100%" src={product.src} alt={product.name} className="img-thumbnail" />
      <br />
      <CardTitle><p className="center">{product.price}</p></CardTitle>
      <CardText>{product.name}</CardText>
      <CardText>{product.category}</CardText>
    </Card> 
  );
}

可选调整 #

如果觉得Alan按钮和内容的间距不符合预期，可以调整App外层容器的pt-5为pt-4/pt-6，或者直接修改Alan按钮配置中的top数值即可。

内容的提问来源于stack exchange，提问作者Swapnil Ghule