React bootstrap 响应式设计无法与 react hooks 和 alan AI 一起使用答案

【问题标题】：React bootstrap responsive design not work as intended with react hooks and alan AIReact bootstrap 响应式设计无法与 react hooks 和 alan AI 一起使用
【发布时间】：2021-08-03 23:42:36
【问题描述】：

我是一个完整的 react hooks 初学者，就像几周前一样。所以我在我的反应卡组件中使用反应钩子。基本上卡片组件必须在一行中分成 3 列。但有垂直堆叠在一起。也许我的反应应用程序只占用了浏览器窗口的一半。我不知道为什么会这样。我还在用alan AI按钮做一些其他的东西，看起来我的卡片组件和按钮重叠了。

我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我的 App.js

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 { Grid } from '@material-ui/core';
import { menuItems } from './shared/Myitems.js';
import CardJS from './CardJS.js'


function RenderMenuItem({product})
{
return (
  <Container>
    
    <Row xs="2">

    <Col>
      <CardDeck style={{display: 'flex', flexDirection: 'col'}} >
 
          <CardJS product={product}/>
       
     
      
 
     </CardDeck>
  </Col>
  </Row>
  </Container>
 
 
);
}




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 (


 
  <div className="App ">

   
    {products.map((product) => (
      
              <div  key={product.name}  >
    
                   <RenderMenuItem  product={product} />
                    
                </div>
       
    

    ))}
    Cart:
    {cart.map((cartItem) => (
      <div key={cartItem.name}>
        {cartItem.name} - {cartItem.price} - {cartItem.category}
      </div>
    ))}
  </div>
)



  
}

export default App;

我的 CardJS.js

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 { Grid } from '@material-ui/core';
import { menuItems } from './shared/Myitems.js';

export default function  CardJS({product})
{
    return (
<>


        <Card className="col-12 col-md-4">
        <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> 

</>

    );
}

并且我已经安装了所有必要的依赖项。

yarn add bootstrap
yarn add reactstrap

添加了 Bootstrap 依赖并显示在代码中如果有什么问题请告诉我..!!! 任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs bootstrap-4 react-hooks reactstrap

【解决方案1】：

map() 函数中有太多容器... 而是将行放在列表之外，并将 col 包装在顶层：

div className="App ">
<Container>
<Row xs="2" >
   
    {products.map((product) => (
      
              <Col  key={product.name}  >
    
                   <RenderMenuItem  product={product} />
                    
                </Col>
    ))}

</Row>

    {cart.map((cartItem) => (
      <div key={cartItem.name}>
        {cartItem.name} - {cartItem.price} - {cartItem.category}
      </div>
    ))}
</Container>
  </div>

你可以去掉每个项目中的其他行、容器和列组件

【讨论】：