Question

我在组件中呈现正确的内容时遇到问题。组件可以访问所有必需的商店和道具，我在console.log中确认，但它无法呈现内容。

我设置了这样的商店：

const levelDefaultState = {
level: "second"}

我想根据当前状态渲染内容的组件如下所示：

import React from 'react';
import { connect } from 'react-redux'
import LevelTwo from './level2/level2'

class LevelRenderer extends React.Component {

renderLevel(){
    let currentLevel = null;
    if (this.props.level === "second") {
        currentLevel = <LevelTwo level={this.props.level} />
    } else {
        currentLevel = 'No level'
    }

    return currentLevel;
}

render() {
    console.log('store', this.props.level)


    let renderLevelConst = (this.props.level) ? this.renderLevel() : notRendered()

    function notRendered() {
        return 'Not rendered yet'
    }

    return (
        <div>
            {renderLevelConst}
        </div>
    )
}
}

const mapStateToProps = (state) => {
    return {
        level: state.level
    }
}

export default connect(mapStateToProps)(LevelRenderer);

即使状态是“秒”，它所呈现的所有时间都是“无级别”字符串。尝试将初始状态设置为“first”，然后使用setTimeout将其更改为“second”，不做任何更改。

我做错了什么？

Answer 1

尝试：

if（this.props.level.level ===＆＃34; second＆＃34;）{} in renderLevel

由于this.props.level = {level：＆＃34; second＆＃34;，sublevel：＆＃34; 1.splash＆＃34;}你必须调用this.props.level.level来获取关卡值。

条件渲染问题（ReactJS）

1 个答案: