如何从映射中返回 React 组件？

Question

您好，我有一个基于 this.props.name 显示的幻灯片列表。 我在映射数组中列出了所有幻灯片，我想根据容器组件中的按钮按下来将它们渲染出来 1 替换另一个。我在渲染组件时遇到了麻烦。

容器 div 上的按钮正确地为 SlideTest 组件提供正确的名称，例如 Slide1、Slide2、Slide3 等。我希望 SlideTest 采用此名称并呈现组件。我只能返回像 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

我会将渲染信息传递给 Slide 组件。或者最好将幻灯片道具传递给 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>
    )
}