React bootstrap 响应式设计无法按预期使用 React Hooks 和 alan AI

Question

我是 React Hooks 的完全初学者，几周前就开始了。所以我在我的反应卡组件中使用了反应钩子。基本上卡片组件必须在一行中分为 3 列。但有垂直堆叠在一起的。也许我的 React 应用程序只占浏览器 windows 的一半。我不知道为什么会这样。而且我还在使用 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 添加依赖，代码中显示如果有任何问题，请告诉我..!!! 任何帮助将不胜感激。

Answer 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>

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

React bootstrap 响应式设计无法按预期使用 React Hooks 和 alan AI

React bootstrap responsive design not work as intended with react hooks and alan AI

javascript

reactjs

bootstrap-4

reactstrap

react-hooks