Devin Devin - 3 months ago 12
React JSX Question

Why react component?

In the react component, props is received, but the props values is undefined.

My component looks like this

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)


And this is what Home component looks like:

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


When I click the button, it reports _handleNavigate is undefined.
In Home component, props received
Object {_handleNavigate: undefined}

Answer

please change your constructor function:

constructor (props) {
        super(props)

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

because the context of _renderScene is not the context of NavRoot.