用數組反應問題-組件未加載？

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;

我的反應有點生銹。 看看React條件渲染另外，將圖像加載到render函數中可能不是最好的主意，因為每當組件發生更改時，即使與圖像無關，都需要使用它們。