Reactjs 当页面加载时，如何使第一个元素className处于活动状态？

我有分页，它通过将类名更改为“active”来更改单击时元素的样式。当页面加载时，有没有办法在默认情况下让className='active'位于第一个链接上，直到您单击另一个页面？以下是我现在拥有的：

function Pagination({postsPerPage, totalPosts, paginate}) {
    const pageNumbers = [];
    const [active, setActive] = useState('');

    for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
        pageNumbers.push(i);
    }

    return(
        <div className='pagination'>
            {pageNumbers.map(number => (
                <a
                    className={active === number ? 'active' : ''}
                    key={number}
                    onClick={() => {
                        paginate(number);
                        setActive(number);
                    }}
                    href="#">{number}
                </a>
            ))}
        </div>
    );
}

函数分页（{postsPerPage，totalPosts，paginate}）{
常量页码=[]；
const[active，setActive]=useState（“”）；
for（设i=1；i(
))}
);
}

只需将初始状态设置为

1

：

const [active, setActive] = useState(1);

---

只需将初始状态设置为

1

：

const [active, setActive] = useState(1);