reactjs - props 没有传递给 react native 中的另一个组件

Question

当我将函数作为 props 传递给另一个组件时，它不会出现在该组件中

我试图在传递 Prop 的父组件下方创建一个虚拟组件。当我尝试传递给导入的组件时，它没有被传递。我正在使用堆栈导航器进行路由，我不知道是否是我传递的 Prop 没有显示的原因。

import React from 'react'
import {View, Text, TouchableOpacity, Image, StyleSheet, Dimensions, TouchableWithoutFeedback} from 'react-native'

import DrawNavContents from './DrawNavContents'
import Practice from './Practice'

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

class DrawNav extends React.Component { 
    constructor(){
        super()
        this.state = {
            toggleDrawer: false,
            imgPos: 30
      }
  }

toggle = () => {
    this.setState(() => ({
        toggleDrawer: !this.state.toggleDrawer,
        imgPos: this.state.imgPos == 30 ? 300 : 30
    }))
}

render () {
    return (
        <View>
            <TouchableOpacity onPress={this.toggle}>
                <Image
                    source={require('../../images/drawer-150x150.png')}
                    style={{ width: 25, height: 25, marginLeft: this.state.imgPos }}
                    onPress= {this.toggle}
                />
            </TouchableOpacity>

            { 
                this.state.toggleDrawer && (
                    <View style={styles.menu}>
                        <DrawNavContents />
                    </View>
                )
            }
            <Practice toggle={this.toggle}/>
        </View>
        )
    }
}

const styles = StyleSheet.create({
    menu: {
        flex: 1,
        backgroundColor: 'yellow',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width * 0.8, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
})

export default DrawNav

这是 Practice.js 文件:

import React from 'react'
import {View, Text} from 'react-native'

class Practice extends React.Component{
    render(){
        console.log("this is props", this.props)
        return(
            <View>
                <Text>hello</Text>
            </View>
        )
    }
}

export default Practice

这是我得到的 console.log 输出:

"Object {screenProps: undefined, navigation: Object}"

The "toggle" which I have passed is not appearing

Answer 1

您需要在构造函数中传递 Prop 。有关详细信息，请访问此处 https://reactjs.org/docs/react-component.html#constructor

React 组件的构造函数在挂载之前被调用。在为 React.Component 子类实现构造函数时，您应该在任何其他语句之前调用 super(props) 。否则，this.props 将在构造函数中未定义，这会导致错误。

import React from 'react'
import {View, Text, TouchableOpacity, Image, StyleSheet, Dimensions, TouchableWithoutFeedback} from 'react-native'

import DrawNavContents from './DrawNavContents'
import Practice from './Practice'

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

class DrawNav extends React.Component { 
    constructor(props){
        super(props)
        this.state = {
            toggleDrawer: false,
            imgPos: 30
      }
  }

toggle = () => (
this.setState((prevState) => ({
        toggleDrawer: !prevState.toggleDrawer,
        imgPos: prevState.imgPos == 30 ? 300 : 30
    }))
)

render () {
    return (
        <View>
            <TouchableOpacity onPress={this.toggle}>
                <Image
                    source={require('../../images/drawer-150x150.png')}
                    style={{ width: 25, height: 25, marginLeft: this.state.imgPos }}
                    onPress= {this.toggle}
                />
            </TouchableOpacity>

            { 
                this.state.toggleDrawer && (
                    <View style={styles.menu}>
                        <DrawNavContents />
                    </View>
                )
            }
            <Practice toggle={this.toggle}/>
        </View>
        )
    }
}

const styles = StyleSheet.create({
    menu: {
        flex: 1,
        backgroundColor: 'yellow',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width * 0.8, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
})

export default DrawNav