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