Reactjs 如何根据传递到容器中的道具名称显示React组件？

更新解决得很差

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>

const curSlide=this.props.name；
const setView=（）=>{
如果（光标==='Slide1'）{
返回
}else if（光标==='Slide2'）{
返回
}否则{
返回
}
}
返回(
{setView（）}

我有一个故事，其中包含一个承载不同组件的幻灯片容器。我的故事容器下有一个按钮，按下该按钮时，该按钮会将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;

import React，{Component，PropTypes}来自“React”
从“../scss/application.scss”导入sass
从“./SlideContainer”导入SlideContainer
类故事扩展组件{
建造师（道具）{
超级（道具）
此.state={
名称：“”，
计数：0
}
}   
handleClick（e）{
e、 预防默认值（）；
让tempCount=this.state.count+1；
让curSlide=`Slide${tempCount}`；
这是我的国家({
姓名：curSlide，
计数：临时计数
});
}
render（）{
返回(
)
}
}
Story.propTypes={
名称：PropTypes.string，
计数：PropTypes.number
}
导出默认故事；

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;

import React，{Component，PropTypes}来自“React”
从“../scss/application.scss”导入sass
从“./Slide1”导入幻灯片1
从“/Slide2”导入Slide2
类SlideContainer扩展组件{
建造师（道具）{
超级（道具）
此.state={
名称：“”
}
}   
render（）{
让curSlide=this.props.name；
返回(
)
}
}
SlideContainer.propTypes={
名称：PropTypes.string
}
导出默认SlideContainer；

表达式

被编译为

React.createElement

（可能在运行时失败）。没有任何东西可以将组件的名称与您导入的两个模块中的任何一个连接起来

可以将子组件作为道具传入：

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

const{Slide}=this.props//实际的React组件…不是字符串
返回（）

实际上，为什么不使用儿童呢

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

<SlideContainer><Slide/></SlideContainer>

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

//Story.js
常量幻灯片=…//找出要显示的组件
//SlideContainer.js
{this.props.children}

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

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

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

更新： 如果要分离映射，可以从

SlideContainer

创建一个名为

Slides.js

的新文件，其中包含以下内容：

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

export const mapping = { Slide1, Slide2 };

在您的

幻灯片组件中，您可以执行以下操作：

import { mapping } from './Slides';

...

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

一些OT评论-我认为从90年代开始就被弃用了。另外，Story.propTypes没有意义…Story有state.center仍然可以正常工作，我应该只将文本对齐添加到div还是现在如何将div居中？通常所有样式都应该通过CSS完成-理论上浏览器可能会在某个时候开始放弃对的支持。不能获取常量{Slide}=this.props.name不抛出错误。我通过将const设置为this.props.name并返回一个函数，其中包含一系列if-else语句，试图与幻灯片匹配，从而解决了此问题。这并不漂亮，但可以工作。不过，我正在寻找一个更好的解决方案。我认为您没有抓住重点。我认为您不应该尝试传递comp的“name”onent in。只需传递要呈现的子组件…理想情况下使用子组件（上面编辑）谢谢。我能够解决阅读此文件时遇到的问题。但我执行了const Slide=this.props.module（w/o{}），并传递了}我喜欢这个-我尝试一下
import { mapping } from './Slides';

...

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