React中高效构建可复用手风琴组件以展示动态内容

// AccordionContainer.jsx
import React, { useState } from 'react';

/**
 * 可复用的手风琴组件，负责管理展开/折叠状态和统一的样式。
 *
 * @param {object} props
 * @param {string} props.heading - 手风琴的标题。
 * @param {React.ReactNode} props.children - 手风琴展开时显示的内容。
 */
export function AccordionContainer({ heading, children }) {
    // 使用useState管理手风琴的展开/折叠状态
    const [isOpen, setIsOpen] = useState(false);

    // 切换手风琴状态的函数
    const toggle = () => {
        setIsOpen(!isOpen);
    };

    return (
        <div className="accordion-item-wrapper"> {/* 整体容器，便于样式隔离 */}
            {/* 手风琴头部，点击时切换状态 */}
            <div className="dropdown-header" onClick={toggle}>
                <h4 className="dropdown-text">{heading}</h4>
                <span className="dropdown-selection">{isOpen ? '-' : '+'}</span>
            </div>
            {/* 手风琴内容区域，仅在isOpen为true时渲染 */}
            {isOpen && (
                <div className="wrapper"> {/* 内容的外部包裹层，保持统一内边距等 */}
                    {children} {/* 动态内容将在此处渲染 */}
                </div>
            )}
        </div>
    );
}

// MyPage.jsx (例如，一个订单详情页)
import React from 'react';
import { AccordionContainer } from './AccordionContainer'; // 假设文件路径

function MyPage() {
    return (
        <div className="page-container">
            <h1>订单详情</h1>

            {/* 示例1: 配送信息手风琴 */}
            <AccordionContainer heading="配送信息">
                <div className="row">
                    <div className="col-md-6">
                        <div className="info-group mb-3">
                            <label htmlFor="firstName">名</label>
                            <input type="text" id="firstName" className="info-input" name="firstName" placeholder="请输入名" />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="info-group mb-3">
                            <label htmlFor="lastName">姓</label>
                            <input type="text" id="lastName" className="info-input" name="lastName" placeholder="请输入姓" />
                        </div>
                    </div>
                    <div className="col-md-12">
                        <div className="info-group mb-3">
                            <label htmlFor="address">地址</label>
                            <input type="text" id="address" className="info-input" name="address" placeholder="请输入详细地址" />
                        </div>
                    </div>
                </div>
            </AccordionContainer>

            {/* 示例2: 配送选项手风琴 */}
            <AccordionContainer heading="配送选项">
                <div className="delivery-options-group mb-3">
                    <label className="d-block mb-2">选择配送方式:</label>
                    <div className="form-check">
                        <input className="form-check-input" type="radio" name="deliveryOption" id="standardDelivery" value="standard" defaultChecked />
                        <label className="form-check-label" htmlFor="standardDelivery">
                            标准配送 (3-5个工作日，免费)
                        </label>
                    </div>
                    <div className="form-check">
                        <input className="form-check-input" type="radio" name="deliveryOption" id="expressDelivery" value="express" />
                        <label className="form-check-label" htmlFor="expressDelivery">
                            快速配送 (1-2个工作日，¥15.00)
                        </label>
                    </div>
                    <div className="form-check">
                        <input className="form-check-input" type="radio" name="deliveryOption" id="pickup" value="pickup" />
                        <label className="form-check-label" htmlFor="pickup">
                            到店自取 (免费)
                        </label>
                    </div>
                </div>
            </AccordionContainer>

            {/* 示例3: 支付信息手风琴 (可以包含更复杂的表单或组件) */}
            <AccordionContainer heading="支付信息">
                <div className="payment-details">
                    <p>这里可以放置更复杂的支付表单，例如信用卡信息、支付网关选择、优惠券输入等。</p>
                    {/* 甚至可以嵌套一个独立的支付表单组件 */}
                    {/* <PaymentForm /> */}
                    <button className="btn btn-primary mt-3">前往支付</button>
                </div>
            </AccordionContainer>

            {/* 更多手风琴... */}
        </div>
    );
}

export default MyPage;