有三个div的框横向排列,点击哪一个div,就在那个div的正中间下面多个三角形,在react中

import React, { useState } from 'react';

import './index.scss';

const Index = () => {

const [activeDivIndex, setActiveDivIndex] = useState(0);

const [arr, setArr] = useState(['div1', 'div2', 'div3']);

const handleDivClick = (index: any) => {

setActiveDivIndex(index);

};

return (

<div className="container">

{arr?.map((item, index) => {

return (

<div

className={`container-box ${activeDivIndex === index ? 'active' : ''}`}

onClick={()=>handleDivClick(index)}

>

<div className='trangle'></div>

<div className='itembox'>{item}</div>

</div>

);

})}

</div>

);

};

export default Index;

css如下：

.container {

display: flex;

justify-content: center;

align-items: center;

.container-box {

position: relative;

border: 1px solid #ccc;

cursor: pointer;

padding: 20px;

}

.container-box.active {

background-color: aqua;

.trangle {

width: 0;

height: 0;

border-top: 10px solid #000;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

position: absolute;

bottom: -10px;

left: 50%;

transform: translateX(-50%);

}

}

}