React 组件在空时和从服务器加载时收缩

Question

所以我在 React 中建立了一家商店，我面临的问题是，当 Shop 组件加载数据时，当 Cart 组件为空时，组件会收缩并且不会保持其“宽度：100%”属性

我认为问题是在我将组件从 class 转换为 Hooks 时开始的，但我不确定问题出在哪里。

我的问题：

如何解决这个问题并使我的组件不收缩？

应该添加或删除什么？

如果您知道问题出在哪里，我会很乐意学习。

这是他们俩的 css 代码 :

.cart_container{
    display: flex;
    width: 100%;
    min-height: 20rem;
    background-color: burlywood;
    flex-direction: column;  
}

.shopItem_container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
    flex-wrap: wrap;
}

我将添加购物车组件，以便您参考

import React, { useRef } from 'react';
import './cart.css'
import { useIntersection } from 'react-use';
import formatCurrency from '../../../util'
import { Fade } from "react-awesome-reveal";


export default function Cart (props) {     
         
        const { cartItems } = props;
        
        return (
            <div className="container">
                <div className="cart_container" >
       
                {cartItems.length === 0 ? (
                 <div className="cart cart_header"> 
                Cart Is Empty
                </div>
                    ) : (
                <div className="cart cart_header">
                     You Have {cartItems.length} Itames In The Cart{""}
                </div>
                )}
                
                
                <div > 
                    <div className="cart">
                        <Fade direction="up" triggerOnce cascade duration="750">
                        <ul className="cart_items">
                            {cartItems.map((item , index ) => (
                                <li key={index}>
                                    <div className="cart_image">
                                        <img src={item.image} alt={item.name}></img>
                                    </div> 
                                    <div className="ShopItem_details_discription">
                    <div className="productInfo_Container">
                            <div> LOGO </div>
                            <div className="productInfo">
                            <h2>{item.name}</h2>
                                <p>{item.info}</p>
                            </div>
                            <div >
                                <p> Phone Number</p>
                                <div className="flourType_Container" >
                                    {item.flourType.map((x)=>(  
                                    <div>{" "}{x}</div>
                                    ))}
                                </div>
                            </div>
                        </div>
                            
                        </div>
                                    <div className="cart_mengment">
                                       
                                        {formatCurrency(item.price)}
                                        <button onClick={() => props.addAmount(item)} className  = "Btn" > + </button>
                                        <button onClick={() => props.subAmount(item, index)} className  = "Btn" > - </button>
                                        <div className = "ItemCounte"> {item.count}</div>
                                        <button onClick={() => props.removeFromCart(index)}>
                                            Remove
                                        </button>
                                    </div>
                                </li>
                            ))}

                        </ul>
                        </Fade>
                    </div>
                </div>
              
            </div>
            </div>
            
        )
    }

Answer 1

这个问题发生在我开始编码和学习的时候，实际上你的代码运行正常，它遵循width: 100%语句，你需要仔细观察你会发现你写了width: 100% 而不是 width: 100vw，所以 css 实际上占用了 div 的宽度，当没有数据时 div 会自动缩小到1px 左右，记住我说的是 1px 而不是 1%，那是因为 1px 实际上被 css 认为是 100% 宽度，因为那是 div 的全尺寸，所以你的 css 遵循该宽度作为其总宽度的 100% 并呈现缩小的 div 但是当内容加载时，div 实际上变大，被内容和 div 的大小填充增加到可以说 100px，现在 div 的总 100% 宽度是 100px 所以现在 width:100% 将呈现 100px div.

针对此问题的最佳 react.js 解决方案是在加载数据时使用占位符，当数据加载完成后，您只需将占位符替换为您的实际内容即可。

Semantic UI has the perfect example，但制作占位符并不复杂，您可以自己制作一个简单的 css 和 html

React 组件在空时和从服务器加载时收缩

React components shrinking when empty and when loading from the server

reactjs

react-component

我的问题：