Question

我已经准备好此条件渲染功能，并且可以正常工作。

 render() {
    if (this.state.guess === 'guessing') {
        return (
            <div style={rightBarStyle.guessingGameStyle}>
                <div style={rightBarStyle.guessingGameStyle.quizBlockStyle}>
                    <h3> Who is this? </h3>
                    <ul className={'optionsContainer'}>
                        <PeopleNames onClick={(e) => this.handleClick(e)}/>
                    </ul>
                </div>
                <div style={rightBarStyle.guessingGameStyle.imgBlockStyle}>
                    <img style={rightBarStyle.guessingGameStyle.imgBlockStyle.image} src={imageLink}
                         alt={"profile pic"}/>
                </div>
            </div>

        )
    }
    else if (this.state.guess === 'correct') {
        return (
            <div style={rightBarStyle.guessingGameStyle}>
                <div style={rightBarStyle.guessingGameStyle.quizBlockStyle}>
                    <FadeIn>
                        <p className={['details','title'].join(' ')}>{name} </p>
                        <p className={['details','designation'].join(' ')}>Software Developer</p>
                        <p  className={['details','team'].join(' ')}>Software Department</p>
                    </FadeIn>
                </div>
                <div style={rightBarStyle.guessingGameStyle.imgBlockStyle}>
                    <img style={rightBarStyle.guessingGameStyle.imgBlockStyle.image} src={imageLink}
                         alt={"profile pic"}/>
                </div>
            </div>
        )
    }
    else return <div></div>
}

问题：

每当状态更改呈现新的DOM元素时，我都需要应用过渡。我读过有关CSSTransitions的文章，但它们适用于子元素。这是我希望在单击按钮时可以平稳过渡的沙盒链接：SandBox
我必须包括最后一个“ else”，否则会引发错误，即渲染未找到要在DOM上渲染的任何内容。它可以工作，但是有解决方法吗？看起来不整洁。

在React JS中进行条件渲染的过渡

0 个答案: