在多个 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>
1条答案
按热度按时间4ktjp1zp1#
你需要把所有要重用的东西都变成一个组件本身,并传递你想要不同的参数。
参见:https://react.dev/learn/your-first-component
例如:
然后,在需要的地方调用组件,如下所示: