从react.js中调用API渲染数组图片

Question

我有包含的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图像都在一张幻灯片中渲染，我需要在每张幻灯片中分别渲染每张图片。 请帮忙。

Answer 1

我几乎自己想通了。 在Carousel组件中，我们必须在构造函数中设置循环并在map中返回该循环。 很快，这是我的代码，可以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组件，如上面的代码