javascript - 反应:淡入淡出幻灯片不起作用。如何解决?
问题描述
所需的代码是: 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;
幻灯片.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
组件 not 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;
推荐阅读
- c++ - 带有 Visual Studio Code 的 FLTK 库
- python - 用文本替换特定列
- python - 我正在尝试从 python 正则表达式解析字符串-当字符串包含“:”时无法解析
- r - 在 R 中创建具有非数值的函数
- laravel - Laravel:我怎样才能伪造一个 http 请求到第 3 方和模拟 json 响应
- php - PHP 无法捕获 Percona 集群上的 MySQL 二进制日志事件
- json - jq 按键递归搜索值,以
- django - Django 查询 用作表达式的子查询返回多行
- sitefinity - Sitefinity 额外应用程序
- reactjs - 在 Redux reducer 中访问全局状态?