如何不重复html(jsx)标签在React组件?

Question

因为我在我的React组件中有这些代码，我不想一次又一次地重复相同的代码。

是否有任何方法可以使用DRY原则?

我正在制作一个sass样式的登陆页面，我发现我一遍又一遍地重复相同的代码。

<article className="about-company">
ABOUT THE COMPANY
<div className="company">
<p>Founded</p>
<p>2002</p>
</div>
<div className="company">

<p>Employees</p>
<p>10,000 - 15,000</p>
</div>
<div className="company">
<p>Revenue</p>
<p>Confidential</p>
</div>
<div className="company">
<p>Serios</p>
<p>Serious B</p>
</div>
<div className="company">
<p>Raised</p>
<p>$ 27M</p>
</div>
<div className="company">
<p>Industry</p>
<p>Technology</p>
</div>
</article>
<article className="about-company">
ABOUT THE ROLE
<div className="company">
<p>Type</p>
<p>Full-time</p>
</div>
<div className="company">
<p>Total Compansation</p>
<p>$150,000 to $180,000</p>
</div>
<div className="company">
<p>Equity / Options</p>
<p>Yes</p>
</div>
<div className="company">
<p>Travel</p>
<p>Required 10% Travel</p>
</div>
<div className="company">
<p>Work from Home</p>
<p>One Day a Week</p>
</div>
</article>

这些是我的代码。谁能帮我把这些弄掉?

Answer 1

将值放入数组中，然后迭代

let data = [{a:"Founded",b:"2002"},{a:"a",b:"b"}];
data.map((item) => (
<div>
<p>{item.a}</p>
<p>{item.b}</p>
</div>