Bootstrap 在React中以相同的 accordion 风格显示不同内容的有效方法？

7nbnzgx9 于 12个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(114)

在多个 accordion 中显示不同内容的有效方法是什么？enter image description here这就是我在我的项目中所做的，显然，运输信息和交付选项将包含不同的文本框，标签和输入框。
到目前为止，我硬编码每个标签，输入框，文本框的不同 accordion ，但我不认为这是非常聪明和有效的。Hardcoing使我的代码在这一页上很长。下面是我如何硬编码一切的片段。或者我应该简单地将不同的 accordion 划分为不同的react类以使代码更短。

<div className="dropdown-header" onClick={toggle}>
                                <h4 className="dropdown-text">Shipping Information</h4>
                                <span className="dropdown-selection">{selected ? '-' : '+'}</span>
                            </div>
                            {selected && (<div className="wrapper">
                                <div className="row">
                                    <div className="col-md-6">
                                        <div className="info-group mb-3">
                                            <label>First name</label>
                                            <input type="text" className="info-input" name="firstname" />
                                        </div>
                                    </div>
                                    <div className="col-md-6">
                                        <div className="info-group mb-3">
                                            <label>Last name</label>
                                            <input type="text" className="info-input" name="firstname" />
                                        </div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/76428967/effective-way-to-display-different-contents-in-the-same-style-of-accordion-in-re

1条答案

按热度按时间

4ktjp1zp1#

你需要把所有要重用的东西都变成一个组件本身，并传递你想要不同的参数。
参见：https://react.dev/learn/your-first-component
例如：

export function AccordionExample({heading, label1, label2}) {
 return (
  <div className="dropdown-header" onClick={toggle}>
    <h4 className="dropdown-text">{heading}</h4>
    <span className="dropdown-selection">{selected ? '-' : '+'}</span>
  </div>
  {selected && (<div className="wrapper">
    <div className="row">
      <div className="col-md-6">
        <div className="info-group mb-3">
          <label>{label1}</label>
          <input type="text" className="info-input" name="firstname" />
        </div>
      </div>
      <div className="col-md-6">
        <div className="info-group mb-3">
          <label>{label2}</label>
          <input type="text" className="info-input" name="lastname" />
        </div>
      </div>
    </div>
  } 
  );
}

然后，在需要的地方调用组件，如下所示：

<AccordionExample heading="Shipping Information" label1="First Name" label2="Last Name" />
<AccordionExample heading="Delivery Option" label1="Option One" label2="Option Two" />

赞(0）回复(0）举报 12个月前

我来回答

Bootstrap 在React中以相同的 accordion 风格显示不同内容的有效方法？

1条答案

相关问题

热门标签

最新问答