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;

这是外部Container上按钮的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>
    )
}

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

1 个答案: