如何在 React 组件中的函数之间传递 props

Question

我希望将道具传递给导航选项 header 中的组件。有没有办法在不使用 Context API 或 Redux 之类的情况下从组件内部将 itemId 传递给 SaveButton？

export default PostingDetail = ({ navigation }) => {
    const itemId = navigation.getParam('itemId', null)
    return (
        <SafeAreaView >
        </SafeAreaView>
    )
}

PostingDetail.navigationOptions = ({ navigation }) => ({
    title: "Posting Detail",
    headerRight: (
        <PleaseSignIn navigation={navigation} >        
            <SaveButton id={itemId} />
        </PleaseSignIn>
    )
})

Answer 1

您可以按如下方式传递参数：

export default PostingDetail = ({ navigation }) => {
    const itemId = navigation.getParam('itemId', null);
    navigation.setParams({ itemId }); // Pass itemId to navigation state
    return (
        <SafeAreaView >
        </SafeAreaView>
    )
}

然后你可以得到 itemId 如下：

PostingDetail.navigationOptions = ({ navigation }) => ({
    title: "Posting Detail",
    headerRight: (
        <PleaseSignIn navigation={navigation} >        
            <SaveButton id={navigation.state.params.itemId} />
        </PleaseSignIn>
    )
})

如何在 React 组件中的函数之间传递 props

How to pass props between functions within a React component

reactjs

react-native

react-navigation

react-props