Блог

Поэтому у меня есть это custom collapse , где я переключаюсь между 2 стилями отображения на основе этого const [disabled, setDisabled] = useState(true); состояния. Затем я использую это custom collapse в другом компоненте, где после нажатия кнопки я захочу изменить стиль отображения, который является 3rd style of display . Как именно я могу получить состояние, а затем изменить его в исходном компоненте?
Вот коллапс обычая ./CustomCollapse.js

 const CustomCollapse = (props) =gt; {  const [disabled, setDisabled] = useState(true);  return (  lt;StyledCollapse onChange={() =gt; setDisabled(prev =gt; !prev)}gt;  lt;AntCollapse.Panel  header={props.header}  key="1"  showArrow={false}  bordered={false}  extra={  lt;spangt;  lt;span style={{ color: "#0076de", float: "right" }}gt;  // Here's where I wanna add the 3rd style  {disabled ? lt;div id={styles.themeBox}gt;lt;pgt; 10lt;/pgt;lt;/divgt; : lt;img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /gt;}  lt;/spangt;  lt;/spangt;  }  gt;  {props.children}  lt;/AntCollapse.Panelgt;  lt;/StyledCollapsegt;  ); };  

Вот где я хочу изменить состояние ./FollowTelegram.js:

 import AntCollapse from './CustomCollapse';   let [followed, setFollowed] = useState(false);  const setFollowed = () =gt; {  setFollowed(prev =gt; !prev)  }  // {...other code}  lt;AntCollapse id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel"gt;  lt;Row type='flex' align='middle' justify='center'gt;  lt;Button href={links[0]} target="_blank" style={buttonStyle1} onClick={() =gt; setClicked(false)}gt;  lt;Icon type="link" style={{ color: '#fff' }} theme="outlined" /gt;  Subscribe  lt;/Buttongt;  lt;/Rowgt;  lt;span className={styles.greyLine}gt; lt;/spangt;  lt;Row type='flex' align='middle' justify='center'gt;  //Here's where I wanna change followed to true  lt;Button onClick={setFollowed} style={buttonStyle2} disabled={clicked}gt;Continuelt;/Buttongt;   lt;Button type='text' style={{color:'#EB7B59', border:'#f7f7f7', background:'#f7f7f7',height: "2em", fontSize:'16px', margin:'10px 0 0 10px'}}gt;Cancellt;/Buttongt;  lt;/Rowgt;  lt;/AntCollapsegt;  

Но как я могу передать состояние в ./CustomCollapse, чтобы узнать и изменить стиль?

Вы можете передать отключенное значение дочернему компоненту (CustomCollapse), добавив свойство.

 import React, { useState, useEffect } from 'react'  const CustomCollapse = (props) =gt; {  const [disabled, setDisabled] = useState(true);   useEffect(() =gt; {  setDisabled(props.isDisabled)  }, [props.isDisabled])   return (  lt;StyledCollapse onChange={() =gt; setDisabled(prev =gt; !prev)}gt;  lt;AntCollapse.Panel  header={props.header}  key="1"  showArrow={false}  bordered={false}  extra={  lt;spangt;  lt;span style={{ color: "#0076de", float: "right" }}gt;  // Here's where I wanna add the 3rd style  {disabled ? lt;div id={styles.themeBox}gt;lt;pgt; 10lt;/pgt;lt;/divgt; : lt;img src={arrowDownIcon} alt="" style={{ height: '1.2em', marginLRight: '10px', width: 'auto', objectFit: 'contain', float: 'left' }} /gt;}  lt;/spangt;  lt;/spangt;  }  gt;  {props.children}  lt;/AntCollapse.Panelgt;  lt;/StyledCollapsegt;  ); };  

и в родительском компоненте

 import AntCollapse from './CustomCollapse';   //inside your parent component   let [followed, setFollowed] = useState(false);  const [disabledCollapse, setDisabledCollapse] = useState(true)  // {...other code}  const toggleDisabledCollapse = () =gt; {  setDisabledCollapse(prev =gt; !prev)  }  return lt;AntCollapse isDisabled={disabledCollapse} id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel"gt;  lt;Row type='flex' align='middle' justify='center'gt;  lt;Button href={links[0]} target="_blank" style={buttonStyle1} onClick={() =gt; setClicked(false)}gt;  lt;Icon type="link" style={{ color: '#fff' }} theme="outlined" /gt;  Subscribe  lt;/Buttongt;  lt;/Rowgt;  lt;span className={styles.greyLine}gt; lt;/spangt;  lt;Row type='flex' align='middle' justify='center'gt;  //Here's where I wanna change followed to true  lt;Button onClick={toggleDisabledCollapse} href={links[0]} target="_blank" style={buttonStyle2} disabled={clicked}gt;Continuelt;/Buttongt;  lt;Button type='text' style={{ color: '#EB7B59', border: '#f7f7f7', background: '#f7f7f7', height: "2em", fontSize: '16px', margin: '10px 0 0 10px' }}gt;Cancellt;/Buttongt;  lt;/Rowgt;  lt;/AntCollapsegt;