![](/img/trans.png)
[英]How to pass Button component's title into a function in React Native
[英]How to pass a function to a component as a property in React Native
我創建了一個 JS 函數,它返回一個帶有一些子組件的視圖,我正在重用代碼。我想知道如何將函數傳遞給由函數創建的組件
const MenuItem = ({title,indicatorColor,index,onPressItem}) => ( <TouchableOpacity onPress={()=>onPressItem(index)} > <View style={{ paddingLeft: 20, paddingBottom: 15, paddingTop: 15, flexDirection: 'row', width: 150, borderRightWidth: 2, borderRightColor: 'Colors.GREY_TWO', backgroundColor: indicatorColor, alignItems: 'center', }}> <View style={{ backgroundColor: 'black', height: 5, width: 5, borderRadius: 3, alignSelf: 'center', }} /> <Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title}</Text> </View> </TouchableOpacity> ); const onMenuItemPress = (index) => { console.log('menu selected:'.index); } <MenuItem title='Sort' indicatorColor='red' index='0' onPress={onMenuItemPress} />
上面的代碼拋出一個錯誤,說 onMenuPress 不是一個函數,請提出建議。
const MenuItem = ({title,indicatorColor,index,onPressItem}) => (
<TouchableOpacity onPress={()=>onPressItem(index)} >
<View
style={{
paddingLeft: 20,
paddingBottom: 15,
paddingTop: 15,
flexDirection: 'row',
width: 150,
borderRightWidth: 2,
borderRightColor: 'Colors.GREY_TWO',
backgroundColor: indicatorColor,
alignItems: 'center',
}}>
<View
style={{
backgroundColor: 'black',
height: 5,
width: 5,
borderRadius: 3,
alignSelf: 'center',
}}
/>
<Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title}</Text>
</View>
</TouchableOpacity>
);
const onMenuItemPress = (index) => {
console.log('menu selected:'.index);
}
<MenuItem title='Sort' indicatorColor='red' index='0' onPressItem={onMenuItemPress} />
您應該在道具中使用 onPressItem 而不是 onPress
將函數包裝在您要返回的Component
中:
const MenuItem = ({title,indicatorColor,index,onPressItem}) => {
const onMenuItemPress = (index) => {
console.log('menu selected:'.index);
}
return (
<TouchableOpacity onPress={()=>onPressItem(index)} >
<View
style={{
paddingLeft: 20,
paddingBottom: 15,
paddingTop: 15,
flexDirection: 'row',
width: 150,
borderRightWidth: 2,
borderRightColor: 'Colors.GREY_TWO',
backgroundColor: indicatorColor,
alignItems: 'center',
}}>
<View
style={{
backgroundColor: 'black',
height: 5,
width: 5,
borderRadius: 3,
alignSelf: 'center',
}}
/>
<Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title}
</Text>
</View>
</TouchableOpacity>
)
};
<MenuItem title='Sort' indicatorColor='red' index='0' onPress={onMenuItemPress} />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.