React组件将参数传入组件

Question

我有一个反应组件，它基本上是一个简单的滑块。

眼下从滑块图像被硬编码

下面的代码：

import React from 'react'; 

const Slider =() => (
    <div> 

    <div id="myCarousel" className="carousel slide" data-ride="carousel"> 

     <div className="carousel-inner" role="listbox"> 

      <div className="item active"> 
       <img src="http://placehold.it/1250x250" alt="Chania" /> 
      </div> 

      <div className="item"> 
      <img src="http://placehold.it/1250x250" alt="Chania" /> 
      </div> 

      <div className="item"> 
      <img src="http://placehold.it/1250x250" alt="Flower" /> 
      </div> 

      <div className="item"> 
      <img src="http://placehold.it/1250x250" alt="Flower" /> 
      </div> 
     </div> 

     <a className="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
      <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span className="sr-only">Previous</span> 
     </a> 
     <a className="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
      <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span className="sr-only">Next</span> 
     </a> 
    </div> 
    <br /><br /> 

    </div> 
); 

export default Slider; 

我的问题是，我怎么能传递图像URL值到组件？

Answer 1

创建图像阵列，并且经由道具传递：

import React from 'react'; 
 

 
const Slider = ({ images }) => (
 
    <div> 
 

 
    <div id="myCarousel" className="carousel slide" data-ride="carousel"> 
 

 
     <div className="carousel-inner" role="listbox"> 
 
     <div> 
 
      {images.map(({ src, alt}) => (
 
       <div className="item"> 
 
        <img src="http://placehold.it/1250x250" alt="Flower" /> 
 
       </div> 
 
      )} 
 
     </div> 
 

 
     <a className="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
      <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
      <span className="sr-only">Previous</span> 
 
     </a> 
 
     <a className="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
      <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
      <span className="sr-only">Next</span> 
 
     </a> 
 
    </div> 
 
    <br /><br /> 
 

 
    </div> 
 
); 
 

 
export default Slider; 
 

 
// example of usage in parent 
 

 
class App extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     images: [ 
 
    \t { src: "http://placehold.it/1250x250", alt": "Chania" }, 
 
\t  { src: "http://placehold.it/1250x250", alt": "Chania" }, 
 
\t  { src: "http://placehold.it/1250x250", alt": "Flower" }, 
 
\t  { src: "http://placehold.it/1250x250", alt": "Flower" } 
 
     ] 
 
    }; 
 
    } 
 

 
    render() { 
 
    return (
 
     <Slider images={ this.state.images } /> 
 
    ); 
 
    } 
 
}