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

Posted 2023-03-23

【中文标题】React bootstrap 响应式设计无法与 react hooks 和 alan AI 一起使用

【英文标题】：React bootstrap responsive design not work as intended with react hooks and 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   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 依赖并显示在代码中 如果有什么问题请告诉我..!!! 任何帮助将不胜感激。

【参考方案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>

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