在反应导航中，道具未在 contentComponent 上定义

Question

我想在我的抽屉上添加一个注销按钮，所以我使用了 contentComponent 来单独自定义创建注销（而不是其他抽屉菜单）。所以，我创建了一个 class 并尝试接收 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)

在反应导航中，道具未在 contentComponent 上定义

Props is not defined on contentComponent in react navigation

javascript

react-native

react-native-navigation