如何根据传入容器的道具名称显示 React 组件？

Question

UPDATE 解决得不好

const curSlide = this.props.name;

        const setView = () => {
            if(curSlide === 'Slide1') {
                return <Slide1 />
            } else if(curSlide === 'Slide2') {
                return <Slide2 />
            } else {
                return <Slide3 />
            }
        }

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

我有一个故事，其中包含一个承载不同组件的幻灯片容器。我的故事容器下有一个按钮，按下时会将 this.props.name + 1 传递给幻灯片容器。我希望幻灯片容器能够使用此信息并根据按钮单击呈现出正确的幻灯片。

我不确定为什么单击按钮时没有显示任何内容。

Story.js

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


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

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

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

    }

    render() {
        return(
            <div>
                <div>
                    <SlideContainer name={this.state.name}/>
                </div>
                <center><button className="btn btn-danger" onClick={this.handleClick.bind(this)}>
                        <span className="glyphicon glyphicon-heart"></span></button>
                </center>
            </div>
        )
    }
}


Story.propTypes = {
    name: PropTypes.string,
    count: PropTypes.number
}

export default Story;

SlideContainer.js

import React, { Component, PropTypes } from 'react'
import sass from '../scss/application.scss'
import Slide1 from './Slide1'
import Slide2 from './Slide2'


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

    render() {

        let curSlide = this.props.name;

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

SlideContainer.propTypes = {
    name: PropTypes.string
}

export default SlideContainer;

Answer 1

您需要以某种方式将组件的名称映射到实际的组件实例。您可能可以通过执行以下操作使其工作：

import Slide1 from './Slide1'
import Slide2 from './Slide2'

class SlideContainer extends Component {
    constructor(props){
        super(props)
        this.state = {
            slideMapping = {
                'Slide1': Slide1,
                'Slide2': Slide2,
            };
        }
    }  


    render() {

        let curSlide = this.state.slideMapping[this.props.name];

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

如果单个幻灯片组件的名称与道具中的幻灯片名称完全匹配，您可以像这样简单地创建映射：

this.state = {
    slideMapping: { Slide1, Slide2 }
}

它是否比您当前的修复更优雅，取决于您。

更新： 如果您想从SlideContainer 中分离出映射，您可以使用以下内容创建一个名为Slides.js 的新文件：

import Slide1 from './Slide1';
import Slide2 from './Slide2';

export const mapping = { Slide1, Slide2 };

在你的SlideComponent 中你会这样做：

import { mapping } from './Slides';

...

let curSlide = mapping[this.props.name];

Answer 2

表达式<curSlide/> 刚刚编译为React.createElement（并且可能在运行时失败）。没有任何东西可以将组件的名称与您导入的两个模块中的任何一个联系起来。

也许将子组件作为道具传入：

const {Slide} = this.props // an actual React component... not a string
return (<div><Slide/></div>) 

其实，为什么不直接使用儿童呢？

// Story.js
const Slide = ... // figure out which component you want to display

<SlideContainer><Slide/></SlideContainer>

// SlideContainer.js
<div>{this.props.children}</div>