未定义功能contentComponent的onClick(Undefined function o

我试着去访问contentComponent一个按钮，是createDrawerNavigator内里的功能。 问题是，传递给contentComponent的“道具”不具有即时通讯试图进入功能和我不断收到“未定义”。 下面的代码：

const MainDrawer = createDrawerNavigator(
  {
    Home: {
    screen: HomeScreen,
  },
  }, {
    contentComponent: (props) => (
      <View style={{ flex: 1 }}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
          <DrawerItems {...props} />
          <Button
            color='red'
            title='Logout'
            onPress={() => { props.logoutCurrentUser() }}
          />
        </SafeAreaView>
      </View>
    ),
})


const RootNavigator = createStackNavigator({
  MainDrawer: { screen: MainDrawer},
})

class AppNavigation extends Component {
  constructor(props) {
    super(props);
  }

  logoutCurrentUser = () => {
    console.log("LOGOUT PRESSED")
  }

  render() {
    return <RootNavigator logoutCurrentUser={this.logoutCurrentUser}/>
  }
}

所述onPress = {（）=> {props.logoutCurrentUser（）}}是我得到的错误。 如何正确地调用这个函数呢？

提前致谢。

Answer 1:

道具基本上是“论据”你传递给一个组成部分，所以我们说，你有

<Component something="abcd" anotherThing="efg"></Component>

该组件里面，如果你访问this.props你会有这个

{
    something: "abcd",
    anotherThing: "efg",
}

所以你可以做this.props.something或this.props.anotherThing，你可以访问这些值。

你也可以做这样的事情在你的方法

const { something, anotherThing} = this.props;

console.log(something);
console.log(anotherThing);

那么，什么是你的代码错误是，你是不是过客logoutCurrentUser功能为道具。

你需要将它传递给组件

const MainDrawer = createDrawerNavigator(
  {
    Home: {
    screen: HomeScreen,
  },
  }, {
    contentComponent: (props) => (
      <View style={{ flex: 1 }}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
          <DrawerItems {...props} />
          <Button
            color='red'
            title='Logout'
            onPress={() => { props.logoutCurrentUser() }}
          />
        </SafeAreaView>
      </View>
    ),
})

class AppNavigation extends Component {
  constructor(props) {
    super(props);
  }

  logoutCurrentUser = () => {
    console.log("LOGOUT PRESSED")
  }

  render() {
    return <MainDrawer logoutCurrentUser={this.logoutCurrentUser} />
  }
}

如果你想使用HOC通过道具只是通过道具到HOC，一个HOC它就像例如stacknavigator

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

Answer 2:

class AppNavigation extends Component {
  constructor(props) {
    super(props);
    this.logoutCurrentUser = this.logoutCurrentUser.bind(this);
  }

  logoutCurrentUser = () => {
    console.log("LOGOUT PRESSED")
  }

  render() {
    return <MainDrawer logoutCurrentUser={this.logoutCurrentUser}/>
  }
}

Answer 3:

所以，我管理的解决方法，我添加了功能的mapDispatchToProps，我想点击该按钮时调用：

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch,
    logoutCurrentUser: () => {
      console.log("LOGOUT PRESSED")
    }
  }
}

然后在我的课AppNavigation我这样做：

render() {
  return <RootNavigator screenProps={this.props} />
}

而我MainDrawer我改变了这个

const MainDrawer = createDrawerNavigator(
{
  Home: { screen: HomeScreen },
}, {
  contentComponent: (props) => (
    <View style={{ flex: 1 }}>
      <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
        <DrawerItems {...props} />
        <Button
          color='red'
          title='Logout'
          onPress={() => { props.screenProps.logoutCurrentUser() }}
        />
      </SafeAreaView>
    </View>
  ),
})

离开这里的答案的情况下，别人也有同样的问题。

文章来源: Undefined function onClick in contentComponent