[英]Converting Class to function with hooks
我堅持使用掛鈎將 Class 組件轉換為 function / const。
我收到此警告:函數作為 React 子項無效。 如果您返回一個組件而不是從渲染中返回,則可能會發生這種情況。 或者您可能打算調用此 function 而不是返回它。
我在谷歌上搜索了這個警告,但只看到了這個帶有類的警告,我是不是把這個 Class 轉換錯了?
const MyComponent = (props) => {
const position = new Animated.ValueXY()
const [index, setIndex] = useState(props.index || 0)
const rotate = position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: ['-30deg', '0deg', '10deg'],
extrapolate: 'clamp',
})
const rotateAndTranslate = {
transform: [
{
rotate: rotate,
},
position.getTranslateTransform(),
],
}
const likeOpacity = position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [0, 0, 1],
extrapolate: 'clamp',
})
const dislikeOpacity = position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [1, 0, 0],
extrapolate: 'clamp',
})
const nextCardOpacity = position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [1, 0, 1],
extrapolate: 'clamp',
})
const nextCardScale = position.x.interpolate({
inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
outputRange: [1, 0.8, 1],
extrapolate: 'clamp',
})
useEffect(() => {
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
position.setValue({ x: gestureState.dx, y: gestureState.dy })
},
onPanResponderRelease: (evt, gestureState) => {
if (gestureState.dx > 120) {
Animated.spring(position, {
toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy },
useNativedriver: true,
}).start(() => {
setIndex(index + 1, () => {
position.setValue({ x: 0, y: 0 })
})
})
} else if (gestureState.dx < -120) {
Animated.spring(position, {
toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy },
useNativedriver: true,
}).start(() => {
setIndex(index + 1, () => {
position.setValue({ x: 0, y: 0 })
})
})
} else {
Animated.spring(position, {
toValue: { x: 0, y: 0 },
friction: 4,
useNativedriver: true,
}).start()
}
},
})
}, [])
const Users = () => {
return imagesData
.map((item, i) => {
if (i < index) {
return null
} else if (i == index) {
return (
<Animated.View
{...PanResponder.panHandlers}
key={item.id}
style={[
rotateAndTranslate,
{
height: SCREEN_HEIGHT - 120,
width: SCREEN_WIDTH,
padding: 10,
position: 'absolute',
},
]}
>
<Animated.View
style={{
opacity: likeOpacity,
transform: [{ rotate: '-30deg' }],
position: 'absolute',
top: 50,
left: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'green',
color: 'green',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
LIKE
</Text>
</Animated.View>
<Animated.View
style={{
opacity: dislikeOpacity,
transform: [{ rotate: '30deg' }],
position: 'absolute',
top: 50,
right: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'red',
color: 'red',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
NOPE
</Text>
</Animated.View>
<Image
style={{ height: '86%', width: null, borderRadius: 10 }}
source={{ uri: `${item.url}` }}
/>
<View
style={{
backgroundColor: '',
color: 'black',
fontSize: 20,
fontWeight: '800',
position: 'absolute',
bottom: 95,
right: 40,
zIndex: 1000,
width: '85%',
height: '20%',
borderRadiusTop: 20,
}}
>
<Text
style={{ color: 'white', fontSize: 32, fontWeight: '800' }}
>
Black cat
</Text>
<Text
style={{ color: 'white', fontSize: 18, fontWeight: '600' }}
>
Black cat family
</Text>
<View style={styles.iconen}>
<Ionicons style={styles.icon} name="timer" />
<Text style={styles.subtitle}>12 -14</Text>
<Ionicons style={styles.icon} name="barbell-outline" />
<Text style={styles.subtitle}>12 - 14</Text>
<Ionicons style={styles.icon} name="earth" />
<Text style={styles.subtitle}>Belgium</Text>
</View>
</View>
</Animated.View>
)
} else {
return (
<Animated.View
key={item.id}
style={[
{
opacity: nextCardOpacity,
transform: [{ scale: nextCardScale }],
height: SCREEN_HEIGHT - 120,
width: SCREEN_WIDTH,
padding: 10,
position: 'absolute',
},
]}
>
<Animated.View
style={{
opacity: 0,
transform: [{ rotate: '-30deg' }],
position: 'absolute',
top: 50,
left: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'green',
color: 'green',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
LIKE
</Text>
</Animated.View>
<Animated.View
style={{
opacity: 0,
transform: [{ rotate: '30deg' }],
position: 'absolute',
top: 50,
right: 40,
zIndex: 1000,
}}
>
<Text
style={{
borderWidth: 1,
borderColor: 'red',
color: 'red',
fontSize: 32,
fontWeight: '800',
padding: 10,
}}
>
NOPE
</Text>
</Animated.View>
<Image
style={{ height: '86%', width: null, borderRadius: 10 }}
source={{ uri: `${item.url}` }}
/>
</Animated.View>
)
}
})
.reverse()
}
return (
<View>
<View>{Users}</View>
<View style={{ height: SCREEN_HEIGHT - 80 }}>
<ButtonVote />
</View>
</View>
)
}
用戶是一個組件,你應該這樣稱呼它
<Users />
代替
{Users}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.