マッピングからReact Componentを返すにはどうしたらいいですか？

Question

こんにちは私はthis.props.nameに基づいて表示しているスライドのリストを持っています。 私はすべてのスライドをマッピング配列にリストアップしておき、コンテナコンポーネントのボタンを押すことに基づいてもう一方を置き換えてレンダリングしたいと思います。私はコンポーネントをレンダリングするだけで問題があります。

SlideTestコンポーネントは、Slide1、Slide2、Slide3などの適切な名前で適切にバインドされます。この名前を使用してコンポーネントをレンダリングします。 Slide1のようなものだけを返すことができます。これは私が理想的に望むものではありません。ここ

export const mapping = { Slide1, Slide2, Slide3, Slide4 } 

ここマッピング

import React, { Component, PropTypes } from 'react' 
import sass from '../scss/application.scss' 
import { mapping } from './AllSlides' 


class SlideContainer extends Component { 
    constructor(props){ 
     super(props) 
      this.state = { 
       name: '', 
      } 
    } 

    render() { 

     const curSlide =() => { 
      console.log(mapping[this.props.name]); 
      return mapping[this.props.name]; 
     } 

     return(
      <div> 
       <center> 
        {curSlide()} 
       </center> 
      </div> 
     ) 
    } 
} 

SlideContainer.propTypes = { 
    name: PropTypes.string 
} 

export default SlideContainer; 

を使用してコンポーネントである外側コンテナにボタンのhandleClick関数です。

handleClick(e) { 
     e.preventDefault(); 
     let tempCount = this.state.count + 1; 
     let curSlide = `Slide${tempCount}`; 

     this.setState({ 
      name: curSlide, 
      count: tempCount 
     }); 
    } 

Answer 1

レンダリング情報をスライドコンポーネントに渡します。または、新しいスライドをレンダリングするためにSlideContainerにスライド小道具を渡す方が良い。スライドアニメーションが必要な場合はReactCSSTransitionGroupをチェックしてください。

render() { 
    const Slide1 = {slide: 'slide1', src: 'url1'} 
    const Slide2 = {slide: 'slide2', src: 'url2'} 
    const Slide3 = {slide: 'slide3', src: 'url3'} 
    const Slide4 = {slide: 'slide4', src: 'url4'} 

    const mapping = { Slide1, Slide2, Slide3, Slide4 }; 
    const slide = mapping['Slide2']; //or this.props.name 

    return(
     <div> 
      <center> 
       <Slide name={slide.slide} url={slide.url}/> 
      </center> 
     </div> 
    ) 
}