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 Conditional Rendering 另外，将图像加载到render函数中可能不是最好的主意，因为每当组件发生更改时，即使与图像无关，都需要更改图像。

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

1 个答案: