从react.js

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"
]

我必须在Carousel中渲染这些照片。问题是我不知道如何从数组渲染图片，意味着每张图片应分别在每个滑块中输出。

那是我的代码：

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％

＆＃13;

＆＃13;

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>
      )
    }
};

＆＃13;

＆＃13;

＆＃13;

API组件将是相同的，只需更新Carousel组件，如上面的代码