我有 API，其中包括
"pictures": [
"http:\/\/storage\/web\/source\/images\/2016-10-28\/edac054f88fd16aee7bc144545fea4b2.jpg",
"http:\/\/storage\/web\/source\/images\/2016-10-28\/9aa3217f37f714678d758de6f7f5222d.jpg",
"http:\/\/storage\/web\/source\/images\/2016-10-28\/5164ed92c205dc73a37d77e43fe1a284.jpg"
]
我必须在轮播中渲染这些图片。问题是我不知道如何从数组中渲染这些图片，这意味着每张图片都应该在每个滑块中单独输出。
这是我的代码：
const API = 'http://...';
export default class Api extends React.Component {
constructor(props) {
super(props)
this.state = {
slider_pics:[
],
}
}
fetchProfile(id) {
let url = `${API}${name}`;
fetch(url)
.then((res) => res.json() )
.then((data) => {
this.setState({
slider_pics:data.data.pictures,
})
})
.catch((error) => console.log(error) )
}
componentDidMount() {
this.fetchProfile(this.state.name);
}
render() {
return (
<div>
<div>
<Carousel data={this.state}/>
</div>
</div>
)
}
}
export default class Carousel extends React.Component {
render() {
let data = this.props.data;
return(
<div>
<React_Boostrap_Carousel animation={true} className="carousel-fade">
<div >
<img style={{height:500,width:"100%"}} src={data.slider_pics} />
</div>
<div style={{height:500,width:"100%",backgroundColor:"aqua"}}>
456
</div>
<div style={{height:500,width:"100%",backgroundColor:"lightpink"}}>
789
</div>
</React_Boostrap_Carousel>
</div>
)
}
};
在此代码中，所有 URL 图像都在一张幻灯片中呈现，我需要在每张幻灯片中单独呈现每张图片。请帮忙。
我几乎自己弄清楚了。在 Carousel 组件中，我们必须在构造函数中设置循环并在映射中返回该循环。很快，我的代码就 100% 工作了
export default class Carousel extends React.Component {
constructor(props) {
super(props);
const slider_pics=[];
for (let i = 0; i < 10; i++) {
slider_pics.push(<React_Boostrap_Carousel />);
}
this.state = {slider_pics};
}
render() {
let data = this.props.data;
return(
<div>
<React_Boostrap_Carousel animation={true} className="carousel-fade">
{data.slider_pics.map((slider_pic, index) => (
<div key={index}>
<img style={{heght:200, width:1000}} src={slider_pic} />
</div>
))}
</React_Boostrap_Carousel>
</div>
)
}
};
API组件将是相同的，只需要像上面的代码一样更新Carousel组件
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
