Question

在react组件中，收到props，但是props值未定义。

我的组件看起来像这样

class NavRoot extends Component {
    constructor (props) {
        super(props)

        this._handleNavigate = this._handleNavigate.bind(this)
    }

    _renderScene (props) {
        const { route } = props.scene
        if (route.key == 'home') {
            // here is the problem: In Home component, props received Object {_handleNavigate: undefined}
            return <Home _handleNavigate={this._handleNavigate} />
        }
    }

    // handle navigation between scene
    _handleNavigate (action) {
        switch (action && action.type) {
            case 'push':
                this.props.pushRoute(action.route)
                return true;
            case 'back':
            case 'pop':
                return this._handleBackAction()
            default:
                return false;
        }
    }

    render() {
        return (
            <NavigationCardStack
                style={{flex: 1}}
                navigationState={this.props.navigation}
                onNavigateBack={this._handleBackAction}
                renderScene={this._renderScene} />
        )
    }
}

function mapStateToProps (state) {
    return {
        navigation: state.navReducer
    }
}

export default connect(
    mapStateToProps,
    {
        pushRoute: (route) => push(route),
        popRoute: () => pop()
    }
)(NavRoot)

这就是Home组件的样子：

class Home extends Component {
    constructor(props) {
        super(props);
    }
    render() {
    return (
    <View style={styles.container}>
        <Text style={styles.title}>Home</Text>
        <Button onPress={this.props._handleNavigate(route)} label='Go to About' />
    </View>
    )
    }
}

单击按钮时，报告_handleNavigate未定义。在Home组件中，道具收到Object {_handleNavigate: undefined}

Answer 1

请更改构造函数：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

因为_renderScene的上下文不是NavRoot的上下文。

为什么反应组件？

1 个答案: