时间戳

首页 > 解决方案 > 如何在 React 中有 2 个同步的嵌套循环？

reactjs - 如何在 React 中有 2 个同步的嵌套循环？

问题描述

我目前在 React 中有这个循环，它通过一个元素列表。我现在想要另一个列表，每个外部循环只循环一次。不确定这是否足够清楚，但假设我的第一个列表是 ["a","b","c"]，我的第二个列表是 ["1","2","3"]。我希望结果是 1a、2b、3c。我知道如何使用普通的 for 循环来完成此操作，但我不知道如何在 React 中完成此操作。

  const Packages = ({ props }) => {
  const { title, packages } = props;
  return (
    <div className="productsContainer">
      <h2>{title}</h2>
      <Container fluid={true}>
        <Row noGutters={true}>
          {packages.map((el, index) => {
            return (
              <Col key={index} md={4} xs={12}>
                <div className="package" style={{ backgroundColor: el.bgColor }}>
                  <img alt="package" src={el.image} className="svg" />

                  <div className="packageInfo" style={{ backgroundColor: el.bgColor }}>
                    {document.getElm}
                    <div className="packageName">
                      <a href="/packages">
                        <button>{el.title}</button>
                      </a>
                    </div>
                    <Row>
                      {el.list.map((element, index) => {
                        return (
                          <Col md={6} key={index} className="textInfo" style={{ color: el.textColor }}>
                            <p>{el.icons} {element}</p>
                          </Col>
                        );
                      })}
                    </Row>
                  </div>
                  <div className="packageMore">
                    <a href="/packages">{el.link}</a>
                  </div>
                </div>
              </Col>
            );
          })}
        </Row>
      </Container>
    </div>
  );
};

export default Packages;

     packages: {
        title: "Title",
        packages: [
          {
            title: "Start",
            list: ["List1", "List2"],
            icons: ["<i className=\"fas fa-briefcase\"></i>", "<i className=&#34;fas fa-briefcase&#34;></i>"],
            link: "Link",
            bgColor: "white",
            textColor: "black",
            image: START,
      },

标签： reactjs

解决方案

lodash 库为此提供了 zip 方法

_.zip(['a', 'b', 'c'], [1, 2, 3]).map(([v1, v2]) => {
  console.log(v1 + '-' + v2)
}) 

// result
// a-1
// b-2
// c-3

推荐阅读