反应：淡入淡出幻灯片不起作用。怎么解决？

Question

我在尝试实现淡入淡出幻灯片时遇到错误。所需的图像是：

所需代码为： 首页.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;

幻灯片.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;

请告诉我如何解决它。

Answer 1

您可以将图像作为

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;

Answer 2

正如 Heartbit 所说，您需要返回子图像，而不是像

images

/> 这样传递

<Fade images={images}

道具。 react-sldeshow-image NPM 包网站上有一些很好的示例

所以你会有

<Fade duration="5000">
    {images.map((image, idx) => (
        <div className="image-container" key={`${image}__${idx}`}>
            <img src={image} alt={`Slideshow image ${idx}`} />
        </div>
    ))}
</Fade>