React中向子组件传递点击事件的优雅方案探讨

这是一个基础问题，我正在寻求该问题的最佳实践方案指导。

示例场景：点击按钮可折叠手风琴组件。

起初我认为只需传入open属性，由父组件管理状态即可，但当需要同时在子组件中管理该open状态（如点击手风琴标题展开/收起）时，这种方式就失效了。我整理了两种基础实现方案：

方案1：子组件管理状态，允许父组件通过属性和回调影响状态 #

const Page = () => {
    const [shouldWeHideStep1, setShouldWeHideStep1] = useState(false)

    const agreeToTerms = () => {
        // A useEffect in child component picks up this prop change, does what it needs to do, and then
        // runs our callback which will set this state variable back to false.
        // This allows us to repeat the same process over and over again.
        setShouldWeHideStep1(true)
    }

    return (
        <div>
            <Collapsible 
                openDefault={true} 
                title="Step1: Terms" 
                toggleClose={shouldWeHideStep1} 
                toggleCloseDone={() => {
                    setShouldWeHideStep1(false)
                }}>
              <div>
                  Here are the terms: etc..
                  <button onClick={agreeToTerms}>Agree and go to next step</button>
              </div>
            </Collapsible>
            <Collapsible openDefault={false} title="Step2: Something">
              <div>
                  Here is something else...
              </div>
            </Collapsible>
        </div>
    )
}

const Collapsible = ({openDefault, toggleClose = false, toggleCloseDone = null}) => {
    const [open, setOpen] = useState(openDefault)

    useEffect(() => {
        // Our parent component is sending us a one off "time to close" event.
        // We do our close thing here, update local state, then we call back to the parent
        // setState method to 
        if(toggleClose === true){
            setOpen(false)
            if(toggleCloseDone){
                toggleCloseDone()
            }
        }
    }, [toggleClose])

    const toggle = () => {
        setOpen(!open)
    }

    return (
        <div className={styles.collapsible}>
            <div className={styles.collapsibleTitle} onClick={toggle}>
                {title}
            </div>
            {open && (
                <div className={styles.collapsibleContent}>
                    {children}
                </div>
            )}
        </div>
    )
}

方案2：移除子组件状态，全部由父组件管理 #

const Page = () => {
    const [step1Open, setStep1Open] = useState(true)
    const [step2Open, setStep2Open] = useState(false)

    const agreeToTerms = () => {
        setStep1Open(false)
        setStep2Open(true)
    }

    return (
        <div>
            <Collapsible
                open={step1Open}
                title="Step1: Terms"
                toggleCallback={() => {
                    setStep1Open(!step1Open)
                }}>
              <div>
                  Here are the terms: etc..
                  <button onClick={agreeToTerms}>Agree and go to next step</button>
              </div>
            </Collapsible>
            <Collapsible
                openDefault={false}
                title="Step2: Something"
                open={step2Open}
                toggleCallback={() => {
                    setStep2Open(!step2Open)
                }}>
              <div>
                  Here is something else...
              </div>
            </Collapsible>
        </div>
    )
}

const Collapsible = ({open, toggleCallback}) => {
    return (
        <div className={styles.collapsible}>
            <div className={styles.collapsibleTitle} onClick={toggleCallback}>
                {title}
            </div>
            {open && (
                <div className={styles.collapsibleContent}>
                    {children}
                </div>
            )}
        </div>
    )
}

请问针对这类问题，哪种方案更值得推荐？除此之外可能还有其他实现方式吗？

方案对比与推荐 #

方案2更值得优先选择 #

方案2是完全受控组件设计，所有状态由父组件统一管理，子组件仅负责渲染和触发回调。这种模式的优势很直观：

• 状态单一数据源：所有手风琴的展开/收起状态集中在父组件，逻辑清晰，调试时更容易追踪状态变化。
• 组件职责明确：子组件只做UI渲染，不处理状态逻辑，复用性更强——不管是父组件控制还是其他场景调用，子组件都能稳定工作。
• 避免状态不同步：方案1中父组件通过toggleClose触发子组件状态变更，再用toggleCloseDone回调重置父状态，这种双向同步很容易出现时序问题（比如父状态更新不及时导致重复触发），增加维护复杂度。

方案1的适用场景 #

如果手风琴组件需要独立使用（大部分场景不需要父组件干预状态，仅少数特殊情况需要外部控制），方案1的半受控组件模式可以考虑，但需要优化：

• 可以把toggleClose改成可选的open props，当父组件传入open时，子组件放弃本地状态，完全遵循父组件控制；当父组件不传入时，使用本地状态管理。这是React官方推荐的受控/非受控组件兼容模式，比方案1的toggleClose回调更简洁。

其他实现方式 #

1. 兼容受控与非受控的通用组件 #

这是React生态中最常用的手风琴组件设计模式，同时支持两种使用场景：

const Collapsible = ({ open: controlledOpen, defaultOpen = false, onToggle, title, children }) => {
    // 父组件传入open时用受控状态，否则用本地状态
    const [localOpen, setLocalOpen] = useState(defaultOpen);
    const isControlled = controlledOpen !== undefined;
    const open = isControlled ? controlledOpen : localOpen;

    const handleToggle = () => {
        if (isControlled) {
            onToggle?.(!open);
        } else {
            setLocalOpen(!localOpen);
            onToggle?.(!localOpen);
        }
    };

    return (
        <div className={styles.collapsible}>
            <div className={styles.collapsibleTitle} onClick={handleToggle}>
                {title}
            </div>
            {open && (
                <div className={styles.collapsibleContent}>
                    {children}
                </div>
            )}
        </div>
    );
};

// 使用方式1：非受控（子组件自己管理状态）
<Collapsible defaultOpen={true} title="Step1: Terms">...</Collapsible>

// 使用方式2：受控（父组件管理状态）
<Collapsible open={step1Open} onToggle={(newOpen) => setStep1Open(newOpen)} title="Step1: Terms">...</Collapsible>

这种模式兼顾灵活性和简洁性，既支持独立使用，也支持父组件统一控制，是最通用的解决方案。

2. 使用Context管理全局手风琴状态 #

如果页面有很多手风琴组件，且需要联动（比如展开一个时自动收起其他），可以用React Context把状态提升到全局：

const AccordionContext = createContext({});

const Accordion = ({ children }) => {
    const [activeKey, setActiveKey] = useState(null);

    const handleToggle = (key) => {
        setActiveKey(activeKey === key ? null : key);
    };

    return (
        <AccordionContext.Provider value={{ activeKey, handleToggle }}>
            {children}
        </AccordionContext.Provider>
    );
};

const AccordionItem = ({ key: itemKey, title, children }) => {
    const { activeKey, handleToggle } = useContext(AccordionContext);
    const isOpen = activeKey === itemKey;

    return (
        <div className={styles.collapsible}>
            <div className={styles.collapsibleTitle} onClick={() => handleToggle(itemKey)}>
                {title}
            </div>
            {isOpen && (
                <div className={styles.collapsibleContent}>
                    {children}
                </div>
            )}
        </div>
    );
};

// 使用方式
<Accordion>
    <AccordionItem key="step1" title="Step1: Terms">...</AccordionItem>
    <AccordionItem key="step2" title="Step2: Something">...</AccordionItem>
</Accordion>

这种方式适合多手风琴联动的场景，避免父组件维护大量状态变量，代码更简洁。

内容的提问来源于stack exchange，提问作者dtbaker