反应导航中的 contentComponent 上没有定义道具

Question

我正在尝试在我的抽屉上添加一个注销按钮，所以我使用 contentComponent 来单独自定义创建注销（而不是其他抽屉菜单）。所以，我创建了一个类并试图接收 DrawerItems 但它说没有定义道具。请帮忙。

我的代码自定义组件：

 class DrawerComponent extends Component {
constructor(props) {
    super(props)
    console.log(this.props)
  }

render () {
    return (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {props.children} />
                <TouchableOpacity onPress={() => console.log("Pressed")}>
                    <Text>
                    Logout
                    </Text>
                </TouchableOpacity>
            </SafeAreaView>
        </View>
    );
  }
 }; 

我的抽屉选项：

 const DrawerNavigator = createDrawerNavigator({
Dashboard: {
  screen: AppStackNavigator,
  navigationOptions: {
    drawerLabel: "Home",
  }
},
Training: {
  screen: Training,
  navigationOptions: {
    drawerLabel: "Training"
  }
},
RoutePlan: {
  screen: RouteCalendar,
  navigationOptions: {
    drawerLabel: "Route Plan"
  }
},
Logout: {
  screen: StoreList,
  navigationOptions: {
    drawerLabel: "Logout"
  }
}
},
{
contentOptions: {
  activeTintColor: '#127CC1',
},
contentComponent: props => <DrawerComponent {...props}/>,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
navigationOptions : ({navigation}) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const headerTitle = routeName;
  return {
      headerTitle,
      headerLeft: (
        <Icon name="md-menu" style={{ marginLeft: 10 }} 
        onPress={() => navigation.toggleDrawer()}
        />
      )
    }
  }
}
);

我的 customComponent 页面出现错误。请帮助我度过难关！

Answer 1

在DrawerComponent 的render 方法中，您正在调用props.children。在这种情况下，props 尚未在 render 方法中定义。您可以在渲染方法的开头使用类似let props = this.props 的行来定义它，或者只调用this.props 而不是裸露的props。

如果您改为使用函数式组件，则无需从 this 获取 props，而是将其作为函数式组件的参数：

function FooComponent(props){
  return (<div style={{color:"#F00"}}>props.children</div>)
}

ReactDOM.render(<FooComponent><em>Hi!</em></FooComponent>, targetElement)