反应：淡入淡出幻灯片不起作用如何解决？

问题描述

在尝试实施“淡入淡出”幻灯片时出现错误。所需的图像是：

所需的代码是： Home.js

import React,{Component} from 'react';
import Header from '../Header/Header';
import Slideshow from '../Slideshow/Slideshow';


class Home extends Component{
        render(){
            return(
                <div>
                    <Header/>
                    <Slideshow/>
                </div>
            )

        }
};

export default Home;

Slideshow.js

import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
  'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048','https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];

const Slideshow = () => {
    return (
        <Fade
          images={images}
          duration="5000"
          transitionDuration="1000"/>
       )
    }

export default Slideshow;

请告诉我如何解决。

解决方法

您可以将图像作为children传递到Fade而不是props的组件：

import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
  'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048','https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];

const Slideshow = () => {
    return (
        <Fade>
          // first child
          <div className="each-fade">
            <div className="image-container">
             <img src={images[0]} />
            </div>
            <h2>First Slide</h2>
          </div>
          // second child
          <div className="each-fade">
            <div className="image-container">
              <img src={images[1]} />
            </div>
            <h2>Second Slide</h2>
          </div>
       </Fade>
     )
}

export default Slideshow;