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

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

function AccordionItem({ heading, children }) {
    // 使用useState管理手风琴的展开/折叠状态
    const [isOpen, setIsOpen] = useState(false);

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

    return (
        <div className="accordion-wrapper">
            {/* 手风琴头部，点击时切换状态 */}
            <div className="accordion-header" onClick={toggle}>
                <h4 className="accordion-title">{heading}</h4>
                {/* 根据isOpen状态显示不同的图标 */}
                <span className="accordion-toggle-icon">{isOpen ? '-' : '+'}</span>
            </div>
            {/* 手风琴内容区域，仅在isOpen为true时显示 */}
            {isOpen && (
                <div className="accordion-content">
                    {/* 这里是内容的占位符，通过children prop接收 */}
                    {children}
                </div>
            )}
        </div>
    );
}

export default AccordionItem;

// MyPage.jsx (父组件)
import React from 'react';
import AccordionItem from './AccordionItem'; // 导入AccordionItem组件

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

            {/* 配送信息手风琴 */}
            <AccordionItem heading="配送信息">
                <div className="row">
                    <div className="col-md-6">
                        <div className="info-group mb-3">
                            <label>名</label>
                            <input type="text" className="info-input" name="firstName" />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="info-group mb-3">
                            <label>姓</label>
                            <input type="text" className="info-input" name="lastName" />
                        </div>
                    </div>
                    <div className="col-md-12">
                        <div className="info-group mb-3">
                            <label>地址</label>
                            <input type="text" className="info-input" name="address" />
                        </div>
                    </div>
                </div>
            </AccordionItem>

            {/* 支付选项手风琴 */}
            <AccordionItem heading="支付选项">
                <div className="form-check mb-2">
                    <input className="form-check-input" type="radio" name="paymentOption" id="creditCard" />
                    <label className="form-check-label" htmlFor="creditCard">
                        信用卡支付
                    </label>
                </div>
                <div className="form-check">
                    <input className="form-check-input" type="radio" name="paymentOption" id="paypal" />
                    <label className="form-check-label" htmlFor="paypal">
                        PayPal
                    </label>
                </div>
            </AccordionItem>

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

export default MyPage;

// AccordionItem.jsx (修改后)
import React, { useState } from 'react';

function AccordionItem({ heading, fields }) { // 接收fields prop
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => setIsOpen(!isOpen);

    return (
        <div className="accordion-wrapper">
            <div className="accordion-header" onClick={toggle}>
                <h4 className="accordion-title">{heading}</h4>
                <span className="accordion-toggle-icon">{isOpen ? '-' : '+'}</span>
            </div>
            {isOpen && (
                <div className="accordion-content">
                    <div className="row">
                        {/* 遍历fields数组，动态渲染表单字段 */}
                        {fields && fields.map((field, index) => (
                            <div className="col-md-6" key={index}>
                                <div className="info-group mb-3">
                                    <label>{field.label}</label>
                                    <input
                                        type={field.type || "text"} // 默认type为text
                                        className="info-input"
                                        name={field.name || field.label.toLowerCase().replace(/\s/g, '')}
                                        // 可以根据需要添加value, onChange等属性以支持受控组件
                                        // value={field.value || ''}
                                        // onChange={field.onChange || (() => {})}
                                    />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}

export default AccordionItem;

// MyPage.jsx (使用fields prop)
import React from 'react';
import AccordionItem from './AccordionItem';

function MyPage() {
    // 配送信息字段配置
    const shippingFields = [
        { label: "名", name: "firstName", type: "text" },
        { label: "姓", name: "lastName", type: "text" },
        // 可以根据需要添加更多字段
        // { label: "邮政编码", name: "zipCode", type: "number" }
    ];

    // 配送选项字段配置
    const deliveryOptionsFields = [
        { label: "标准配送", name: "standardDelivery", type: "radio" },
        { label: "加急配送", name: "expressDelivery", type: "radio" }
    ];

    return (
        <div className="page-container">
            <h2>订单详情</h2>
            <AccordionItem heading="配送信息" fields={shippingFields} />
            <AccordionItem heading="配送选项" fields={deliveryOptionsFields} />
        </div>
    );
}

export default MyPage;