如何不在 React 组件中重复 html(jsx) 标签？答案

【问题标题】：How not to repeat html(jsx) tags in React Component?如何不在 React 组件中重复 html(jsx) 标签？
【发布时间】：2021-12-09 08:15:53
【问题描述】：

由于我的 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>

这些是我的代码。谁能帮我摆脱这些。

【问题讨论】：

定义一个包含您要显示的记录的数组并在该数组上循环以显示它们？
你能给我举个例子吗？
{[1, 2].map(x => <div>{x}</div>)} - 这是一个映射数组以在 JSX 结构中动态生成 JSX 组件的示例。我们鼓励您在自己的代码中进行类似的尝试。

标签： javascript html reactjs jsx

【解决方案1】：

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

let data = [{a:"Founded",b:"2002"},{a:"a",b:"b"}];

data.map((item) => (
    <div>
      <p>{item.a}</p>
      <p>{item.b}</p>
    </div>

【讨论】：