Реагировать на проблему с массивом - компонент не загружается?

Question

По какой-то причине мой логический параметр возвращает только URL, компонент которого игнорируется ... но я не знаю, почему кто-то может помочь?

Я хочу вернуть Компонент внутри цикла ... ноничего не происходит?

import React, { Component } from 'react';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
import 'bootstrap-4-grid/scss/grid.scss';

class Slider extends Component {

    render() {

        let showSlides = true;
        let images;

        if(showSlides) {
            images = [
                require('images/slider/1.jpg'),
                require('images/slider/2.jpg'),
                require('images/slider/3.jpg'),
                require('images/slider/4.jpg')
            ];

            <AwesomeSlider>
            {
                images.map(function(image){
                    return <div data-src={image} />
                })
            }
            </AwesomeSlider>
        }

        return (
            <div className="slider">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            {images}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Slider;

Answer 1

Вы не визуализируете AwesomeSlider, оно выполняется в вашем операторе if, но никогда не возвращается.вы только возвращаете массив изображений.Вы могли бы сделать что-то вроде:

class Slider extends Component {

  render() {

    let showSlides = true;
    let images;

    if(showSlides) {
      images = [
        require('images/slider/1.jpg'),
        require('images/slider/2.jpg'),
        require('images/slider/3.jpg'),
        require('images/slider/4.jpg')
      ];
    }

    return (
      <div className="slider">
        <div className="container">
          <div className="row">
            <div className="col-lg-12">
              {
                (images && showSlides) &&
                <AwesomeSlider>
                  {
                    images.map(function(image){
                      return <div data-src={image} />
                    })
                  }
                </AwesomeSlider>
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Slider;

Моя реакция немного ржавая.взгляните на Реакция условного рендеринга Кроме того, загрузка изображений внутри функции рендеринга может быть не лучшей идеей, поскольку они будут требоваться каждый раз, когда происходит изменение в компоненте, даже если он имеетничего общего с изображениями.