反応成分が成分にパラメータを渡す

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