React应用中自动用圆点填充Div的最优实现方案

我正在构建一个React应用，想实现用小型圆角div完全填充一个父div，无论屏幕宽度如何变化，这个父div都能始终被小圆点填满。我之前尝试用Array.fill().map()生成固定数量（266个）的圆点，但屏幕宽度变化时，圆点排列会变得杂乱无章。

我的React组件代码： #

function About() {

    const service = [
        {
            icon: <PhoneCallbackIcon style={{ fontSize: 32 }} />,
            text: "Inbound Call Center Service",
            subText: "Read more"
        },
        {
            icon: <QuestionAnswerIcon style={{ fontSize: 32 }} />,
            text: "Schriftbeschreibung",
            subText: "Read more"
        },
        {
            icon: <GTranslateIcon style={{ fontSize: 32 }} />,
            text: "Übersetzung",
            subText: "Read more"
        }
    ]

    const dots = 266

  return (
    <Container>

        <OurJob>

            <Title>Was machen wir?</Title>

            <Line />

            <p>Wir sind Experten in diesen Bereichen</p>
            
        </OurJob>
        
        <OurServices>
            
            {service.map((item, index) => (
                <Service key={index} >

                    {item.icon}

                    <div>
                       {item.text} 
                    </div>

                    <p>
                        {item.subText}
                    </p>

                </Service>
            ))}

        </OurServices>

        <Dots >

            {Array(dots).fill().map((_, i) => (
                <Dot />
            ))}

        </Dots>

    </Container>
  )
}

我的Styled Components代码： #

const Container = styled.div`
    display: flex;
    width: 100%;
    border-radius: 16px;
    position: relative;
    margin: 5% 0;
    box-shadow: 9px 11px 17px -6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 9px 11px 17px -6px rgba(0,0,0,0.3);
    -moz-box-shadow: 9px 11px 17px -6px rgba(0,0,0,0.3);
`

const Dots = styled.div`
    position: absolute;
    width: 33%;
    display: flex;
    flex-wrap: wrap;
    left: -4%;
    bottom: -25%;
`

const Dot = styled.div`
    width: 4px;
    content: "";
    height: 4px;
    margin: 5px 5.5px;
    border-radius: 50%;
    /* background: rgba(217, 217, 217, 0.5); */
    background: black;

`

const OurJob = styled.div`
    width: 25%;
    padding: 40px;
    background: rgba(122, 223, 210, 1);
    overflow: hidden;
    border-radius: 16px 0 0 16px;
    p {
        font-size: 20px;
        font-weight: 400;
        color: white;
    }
`

const Line = styled.div`
    height: 8px;
    background: white;
    width: 60%;
    margin: 10px 0;
`

const Title = styled.div`
    font-size: 50px;
    font-weight: 600;
    color: white;
`

const OurServices = styled.div`
    display: flex;
    width: 70%;
`

const Service = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    width: 25%;
    text-align: center;

    div {
        font-size: 22px;
        font-weight: 600;
        height: 20%;
    }

    p {
        color: rgba(92, 92, 92, 1);
        font-size: 20px;
    }
`

解决方案 #

方案一：用CSS背景图案实现（推荐） #

这种方式无需动态生成DOM元素，完全靠CSS实现自适应圆点背景，性能更优，且能完美适配容器尺寸变化。

修改Dots的Styled Components代码，替换原有的flex布局：

const Dots = styled.div`
    position: absolute;
    width: 33%;
    left: -4%;
    bottom: -25%;
    /* 用径向渐变模拟圆点，参数对应原Dot的尺寸和间距 */
    background-image: radial-gradient(black 4px, transparent 4px);
    /* 背景大小：圆点宽度+左右margin总和，圆点高度+上下margin总和 */
    background-size: 15px 14px;
    /* 保持容器高度自适应，或者根据需求设置固定高度/aspect-ratio */
    min-height: 100px;
`

然后移除React组件中生成圆点的JS代码，Dots直接留空标签即可：

<Dots />

这样无论容器宽度如何变化，背景图案都会自动平铺，始终填满容器，不会出现排列混乱。

方案二：动态计算圆点数量（JS方案） #

如果必须使用DOM元素实现，可以监听容器尺寸变化，动态计算所需圆点数量：

1. 修改React组件代码，添加尺寸监听和计算逻辑：

import { useState, useEffect, useRef } from 'react';

function About() {
    const service = [
        // ... 原service数组内容不变
    ]

    const [dotsCount, setDotsCount] = useState(0);
    const dotsContainerRef = useRef(null);

    useEffect(() => {
        const calculateDots = () => {
            if (!dotsContainerRef.current) return;
            const container = dotsContainerRef.current;
            // 单个圆点占用的总宽度（自身宽度+左右margin）
            const dotTotalWidth = 4 + 5.5 * 2;
            // 单个圆点占用的总高度（自身高度+上下margin）
            const dotTotalHeight = 4 + 5 * 2;
            // 计算可容纳的列数和行数
            const columns = Math.floor(container.offsetWidth / dotTotalWidth);
            const rows = Math.floor(container.offsetHeight / dotTotalHeight);
            // 更新圆点总数
            setDotsCount(columns * rows);
        };

        // 初始化计算
        calculateDots();
        // 监听窗口 resize 事件
        window.addEventListener('resize', calculateDots);
        // 清理事件监听
        return () => window.removeEventListener('resize', calculateDots);
    }, []);

  return (
    <Container>
        {/* ... 原其他组件内容不变 */}
        <Dots ref={dotsContainerRef}>
            {Array(dotsCount).fill().map((_, i) => (
                <Dot key={i} />
            ))}
        </Dots>
    </Container>
  )
}

2. 保持Dots和Dot的原有样式不变。

这种方式会在容器尺寸变化时重新计算圆点数量，确保填满容器，但相比CSS方案会生成更多DOM节点，性能略差。

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