如何在 React 的 <div> 中使用 for 循环

Question

我有一组图像 URL。我正在尝试制作一个动态引导轮播，它会自动显示数组内的所有图像，无论长度如何。我正在尝试在 HTML 代码的外部分区中使用 for 循环，然后在 for 循环中再次使用 HTML 代码。但是，它给了我一个解析错误：

Unexpected token at the start of for loop. 

我该如何解决这个问题？我也尝试过使用forEach 和map，但没有成功。我是 React 的新手。这是我的代码：

import React, { Component } from 'react';

const Slideshow = () => {
  const image4 = 'https://miro.medium.com/max/2800/0*JrIbdP7jK-8hNwny.jpg';
  const image5 = 'https://i.pinimg.com/originals/8e/2a/58/8e2a58243e9e5e6ed37928046aba64b8.jpg';
  const image6 = 'https://images.firstpost.com/wp-content/uploads/2019/04/assassins-creed.jpg';

  const imgArr = [image4, image5, image6];

  return (
    <div>
      <div
        id='carouselExampleControls'
        className='carousel slide'
        data-ride='carousel'
        data-pause='false'
      >
        <div className='carousel-inner'>
        {
            for (i = 0; i < 3; i++) {
                if (i === 0) {
                <div className='carousel-item active'>
                    <img src={imgArr[i]} className='d-block w-100' alt='...' />
                </div>;
                } else {
                <div className='carousel-item'>
                    <img src={imgArr[i]} className='d-block w-100' alt='...' />
                </div>;
                }
            }
        }
        </div>
        <a
          className='carousel-control-prev'
          href='#carouselExampleControls'
          role='button'
          data-slide='prev'
        >
          <span
            className='carousel-control-prev-icon'
            aria-hidden='true'
          ></span>
          <span className='sr-only'>Previous</span>
        </a>
        <a
          className='carousel-control-next'
          href='#carouselExampleControls'
          role='button'
          data-slide='next'
        >
          <span
            className='carousel-control-next-icon'
            aria-hidden='true'
          ></span>
          <span className='sr-only'>Next</span>
        </a>
      </div>
    </div>
  );
};

export default Slideshow;

这是我的幻灯片组件，我正在 app.js 文件中呈现它。

Answer 1

试试这个！

您可以添加一个映射并将其存储在一个变量中并在组件中使用它，而不是在 jsx 中添加一个 for 循环。

const carousel = imgArr.map(function (image, index) {
  if (index === 0) {
    return (
      <div className='carousel-item active'>
        <img src={image} className='d-block w-100' alt='...' />
      </div>
    );
  }

  return (
    <div className='carousel-item'>
      <img src={image} className='d-block w-100' alt='...' />
    </div>
  );
});

完整代码。

import React, { Component } from 'react';

const Slideshow = () => {
  const image4 = 'https://miro.medium.com/max/2800/0*JrIbdP7jK-8hNwny.jpg';
  const image5 = 'https://i.pinimg.com/originals/8e/2a/58/8e2a58243e9e5e6ed37928046aba64b8.jpg';
  const image6 = 'https://images.firstpost.com/wp-content/uploads/2019/04/assassins-creed.jpg';

  const imgArr = [image4, image5, image6];

  const carousel = imgArr.map(function (image, index) {
    if (index === 0) {
      return (
        <div className='carousel-item active'>
          <img src={image} className='d-block w-100' alt='...' />
        </div>
      );
    }

    return (
      <div className='carousel-item'>
        <img src={image} className='d-block w-100' alt='...' />
      </div>
    );
  });

  return (
    <div>
      <div
        id='carouselExampleControls'
        className='carousel slide'
        data-ride='carousel'
        data-pause='false'
      >
        <div className='carousel-inner'>{carousel}</div>
        <a
          className='carousel-control-prev'
          href='#carouselExampleControls'
          role='button'
          data-slide='prev'
        >
          <span
            className='carousel-control-prev-icon'
            aria-hidden='true'
          ></span>
          <span className='sr-only'>Previous</span>
        </a>
        <a
          className='carousel-control-next'
          href='#carouselExampleControls'
          role='button'
          data-slide='next'
        >
          <span
            className='carousel-control-next-icon'
            aria-hidden='true'
          ></span>
          <span className='sr-only'>Next</span>
        </a>
      </div>
    </div>
  );
};

export default Slideshow;

Answer 2

您在 JSX 中 {} 之间放置的代码应该是 expression （即：评估为值的东西）。 for 是一个语句，而不是一个表达式，所以它不会计算任何东西。你可以在你的数组上使用.map()，它会返回一个数组，然后你可以在你的JSX中使用它。

重复 JSX 代码这一事实也不好。当i 为0 时，您唯一需要更改的是active 类。相反，您可以向您的 div 添加一个条件类，这样您就不必在两个地方维护carousel-item。

...
<div className="carousel-inner">
  {imgArr.map((elem, i) => 
    <div className={"carousel-item " + (i === 0 ? "active" : "")}>
      <img src={elem} className="d-block w-100" alt="..."/>
    </div>
  )}
</div>
...

以下示例：

function App() {
  const imgArr = ['a', 'b', 'c'];
  return (
    <div className="carousel-inner">
      {imgArr.map((elem, i) => 
        <div className={"carousel-item " + (i === 0 ? "active" : "")}>
          {elem}
        </div>
      )}
    </div>
  );
}

ReactDOM.render(<App />, document.body);

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>