Блог

Итак, у меня есть это Custom Collapse , и каждый раз, когда я переключаю 1 панель, все 4 из них открываются одновременно.
Вот как я меняю состояние между parent component и child component :

 //Parent Component

const [show, setShow] = useState(false)
const handleShow = (idx) => {
    setFollowed(prev => !prev)
  }
<AntCollapse isFollowed={followed[1]} show={show} keys="1" setShow={setShow} header="Follow XXX on Telegram">
     //some code
     <Row type='flex' align='middle' justify='center'>
         <Button onClick={() => {handleFollow(1); handleShow(); }} style={buttonStyle2} disabled={clicked}>Continue</Button> 
         <Button type='text' style={{color:'#EB7B59', border:'#f7f7f7', background:'#f7f7f7',height: "2em", fontSize:'16px', margin:'10px 0 0 10px'}}>Cancel</Button>
     </Row>
</AntCollapse>

//-------------------------------------------------------------------

//Child Component

const [key, setKey] = useState([props.keys]);
const handlePanelClose = () => props.setShow(prev => !prev);
<StyledCollapse accordian activeKey={props.show ? key : []} onChange={combineFunc}> 
      <AntCollapse.Panel
        {...props}
        header={props.header}
        showArrow={false}
        bordered={false}
        key={props.keys}
        extra={
            //some code
        }
      >
      {props.children}
      </AntCollapse.Panel>
</StyledCollapse>
 

Как мне установить состояние для каждой панели по отдельности?

setShow это единственный флаг, который вы держите, чтобы решить, сворачивать панель или нет.

Если у вас несколько панелей, и вы хотите, чтобы каждая панель имела индивидуальный элемент управления, вы должны содержать объект флагов { panel1 : true, panel2: false ...} или список флагов [true, false, true ..] в зависимости от вашей реализации.

Вы можете отображать эти панели, например, в цикле, таким образом, чтобы у каждой из них был уникальный идентификатор, который каждый дочерний компонент получит от родительского компонента.

Таким образом, при вызове handleShow из дочернего компонента вы можете вызвать его с идентификатором, handleShow(key) и родительский компонент будет знать, какую из панелей свернуть.

Родительский —

 const [show, setShow] = useState({})
const handleShow = (panelId) => {
    setShowArray({...show, panelId: !show[panelId})
  }