根据其他组件的状态更改显示

Question

所以我有这个custom collapse，我根据这个const [disabled, setDisabled] = useState(true); 状态在两种显示风格之间切换。然后我在另一个组件上使用这个custom collapse，在我单击一个按钮后，我会想要更改为另一种显示样式，即3rd style of display。我究竟如何获得状态然后在原始组件上更改它？
这是 ./CustomCollapse.js

中的自定义折叠

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

这里是我想在 ./FollowTelegram.js 中更改状态的地方：

import AntCollapse from './CustomCollapse';

  let [followed, setFollowed] = useState(false);
  const setFollowed = () => {
    setFollowed(prev => !prev)
  } 
// {...other code}

<AntCollapse id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel">
          <Row type='flex' align='middle' justify='center'>
            <Button href={links[0]} target="_blank" style={buttonStyle1} onClick={() => setClicked(false)}>
              <Icon type="link" style={{ color: '#fff' }} theme="outlined" />
              Subscribe
            </Button>
          </Row>
          <span className={styles.greyLine}> </span>
          <Row type='flex' align='middle' justify='center'>
           //Here's where I wanna change followed to true
            <Button onClick={setFollowed} 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>

但是如何将状态传递给 ./CustomCollapse 以了解和更改样式？

Answer 1

您可以通过添加属性将禁用的值传递给子组件（CustomCollapse）。

import React, { useState, useEffect } from 'react'

const CustomCollapse = (props) => {
    const [disabled, setDisabled] = useState(true);

    useEffect(() => {
        setDisabled(props.isDisabled)
    }, [props.isDisabled])

    return (
        <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
            <AntCollapse.Panel
                header={props.header}
                key="1"
                showArrow={false}
                bordered={false}
                extra={
                    <span>
                        <span style={{ color: "#0076de", float: "right" }}>
                            // Here's where I wanna add the 3rd style
                            {disabled ? <div id={styles.themeBox}><p>+10</p></div> : <img src={arrowDownIcon} alt="" style={{ height: '1.2em', marginLRight: '10px', width: 'auto', objectFit: 'contain', float: 'left' }} />}
                        </span>
                    </span>
                }
            >
                {props.children}
            </AntCollapse.Panel>
        </StyledCollapse>
    );
};

在父组件中

import AntCollapse from './CustomCollapse';

    //inside your parent component

    let [followed, setFollowed] = useState(false);
    const [disabledCollapse, setDisabledCollapse] = useState(true)
    // {...other code}
    const toggleDisabledCollapse = () => {
        setDisabledCollapse(prev => !prev)
    }
    return <AntCollapse isDisabled={disabledCollapse}  id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel">
        <Row type='flex' align='middle' justify='center'>
            <Button href={links[0]} target="_blank" style={buttonStyle1} onClick={() => setClicked(false)}>
                <Icon type="link" style={{ color: '#fff' }} theme="outlined" />
                Subscribe
            </Button>
        </Row>
        <span className={styles.greyLine}> </span>
        <Row type='flex' align='middle' justify='center'>
               //Here's where I wanna change followed to true
            <Button onClick={toggleDisabledCollapse} href={links[0]} target="_blank" 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>