Question

更新

解决不佳问题

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

表达式<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>

Answer 2

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

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];

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

2 个答案: