用数组反应问题-组件未加载？

Question

For some reason, my the boolean only returns the URL's the component is being ignored.. but I don't know why can someone help?

I want to return the Component inside the loop.. but nothing happens?

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

You are not rendering the AwesomeSlider , it gets executed in your if statement, but never returned. you only return the array of images. you could do something like:

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;

My react being a little rusty. take a look at React Conditional Rendering Also, having the images load inside the render function may not be the best idea, since they will be required every single time there is a change in the component, even if it has nothing to do with images.