英文:
Effective way to display different contents in the same style of accordion in React?
问题
以下是您要翻译的内容：
什么是在多个手风琴中显示不同内容的有效方法？
输入图像描述
这是我在我的项目中正在做的事情，显然，运输信息和交付选项将包含不同的文本框、标签和输入框。
到目前为止，我正在为不同的手风琴硬编码每个标签、输入框和文本框，但我认为这不是很聪明和有效的做法。硬编码使我的代码在这一页变得非常长。以下是我如何硬编码所有内容的代码片段。
或者，我应该简单地将不同的手风琴分成不同的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>
</div>
</div>
</div>
)}
请注意，代码部分未进行翻译。
英文:
what is an effective way to display different contents in the multiple accordions?
enter image description here
This is what I am doing in my project, and obviously shipping information and delivery options would contain different textboxs, labels, and input boxes.
As of now, I am hardcoding every label, input box, textbox for the different accordions, but I don't think this is very smart and effective. Hardcoing makes my code very long for this one page. Below is a snippet of how I am hardcoding everything.
Or should I simply divide the different accordions into different react classes to make the code shorter.
<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
得分: 0
你需要将所有需要重复使用的部分制作成一个组件，并通过参数传递你想要不同的内容。
请参考：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>
</div>
)}
);
}
然后，你可以在需要的地方调用你的组件，如下所示：
<AccordionExample heading="Shipping Information" label1="First Name" label2="Last Name" />
<AccordionExample heading="Delivery Option" label1="Option One" label2="Option Two" />
英文:
You need to make everything that's going to be re-used into a component itself and pass through parameters you want to be different.
Please see: https://react.dev/learn/your-first-component
For Example:
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>
}
);
}
You would then call your component where needed like so:
<AccordionExample heading="Shipping Information" label1="First Name" label2="Last Name" />
<AccordionExample heading="Delivery Option" label1="Option One" label2="Option Two" />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论