功能组件不能给出ref.尝试访问此ref将失败

Question

控制台警告函数组件不能给出refs。尝试访问此ref将失败。你是想用吗React.forwardRef () ?检查'OnboardingScreen'的渲染方法警告:函数组件不能给出refs。尝试访问此ref将失败。你是故意的吗使用React.forwardRef () ?% s % s检查'OnboardingScreen*的渲染方法

我收到这个警告，我不能传输Ref

OnboardingScreen

import React, {useRef, useState} from 'react';
import {Dimensions, View} from 'react-native';
import {ONBOARDING} from '../data/onboarding';
import Onboarding from '../components/ Onboarding/Onboarding';
import OnboardingFooter from '../components/ Onboarding/OnboardingFooter';
import {colors} from '../constants/config';
const windowWidth = Dimensions.get('window').width;
const OnboardingScreen = () => {
const [currentSate, setCurrentState] = useState(0);
const ref = useRef(null);
const updateCurrentState = e => {
const contentOffsetX = e.nativeEvent.contentOffset.x;
const currentSate = Math.round(contentOffsetX / windowWidth);
setCurrentState(currentSate);
};
const nextSlider = () => {
const nextSliderState = currentSate + 1;
if (nextSliderState != ONBOARDING.length) {
const offset = nextSliderState * windowWidth;
ref?.current?.scrollToOffset({offset});
setCurrentState(nextSliderState);
}
};
return (
<View style={{flex: 1, backgroundColor: colors.lightGray}}>
<Onboarding
list={ONBOARDING}
updateCurrentState={updateCurrentState}
ref={ref}
/>
<OnboardingFooter
list={ONBOARDING}
currentSate={currentSate}
nextSlider={nextSlider}
/>
</View>
);
};
export default OnboardingScreen;

新员工培训

import React from 'react';
import {Dimensions, FlatList, Image, Text, View} from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const Onboarding = ({list, updateCurrentState, ref}) => {
return (
<FlatList
data={list}
horizontal
ref={ref}
pagingEnabled
onMomentumScrollEnd={updateCurrentState}
contentContainerStyle={{height: windowHeight * 0.75}}
showsHorizontalScrollIndicator={false}
renderItem={({item, index}) => {
return (
<View style={{alignItems: 'center'}}>
<Image
source={item.image}
style={{height: '75%', width: windowWidth}}
/>
<Text
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
marginTop: 30,
}}>
{item.title}
</Text>
<Text
style={{
color: 'white',
fontSize: 13,
marginTop: 5,
maxWidth: '80%',
textAlign: 'center',
lineHeight: 23,
}}>
{item.subtitle}
</Text>
</View>
);
}}
/>
);
};
export default Onboarding;

Answer 1

您需要遵循forwarding ref概念，请参阅此文档:https://reactjs.org/docs/forwarding-refs.html

你的解决方案如下:

import React, {useRef, useState} from 'react';
import {Dimensions, View} from 'react-native';
import {ONBOARDING} from '../data/onboarding';
import Onboarding from '../components/ Onboarding/Onboarding';
import OnboardingFooter from '../components/ Onboarding/OnboardingFooter';
import {colors} from '../constants/config';
const windowWidth = Dimensions.get('window').width;
const OnboardingScreen = () => {
const [currentSate, setCurrentState] = useState(0);
const ref = React.createRef(null); //<-----------change here
const updateCurrentState = e => {
const contentOffsetX = e.nativeEvent.contentOffset.x;
const currentSate = Math.round(contentOffsetX / windowWidth);
setCurrentState(currentSate);
};
const nextSlider = () => {
const nextSliderState = currentSate + 1;
if (nextSliderState != ONBOARDING.length) {
const offset = nextSliderState * windowWidth;
ref?.current?.scrollToOffset({offset});
setCurrentState(nextSliderState);
}
};
return (
<View style={{flex: 1, backgroundColor: colors.lightGray}}>
<Onboarding
list={ONBOARDING}
updateCurrentState={updateCurrentState}
ref={ref}
/>
<OnboardingFooter
list={ONBOARDING}
currentSate={currentSate}
nextSlider={nextSlider}
/>
</View>
);
};
export default OnboardingScreen;

新员工培训

import React from 'react';
import {Dimensions, FlatList, Image, Text, View} from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const Onboarding = React.forwardRef(({list, updateCurrentState},ref) => {   //<====================here
return (
<FlatList
data={list}
horizontal
ref={ref}
pagingEnabled
onMomentumScrollEnd={updateCurrentState}
contentContainerStyle={{height: windowHeight * 0.75}}
showsHorizontalScrollIndicator={false}
renderItem={({item, index}) => {
return (
<View style={{alignItems: 'center'}}>
<Image
source={item.image}
style={{height: '75%', width: windowWidth}}
/>
<Text
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
marginTop: 30,
}}>
{item.title}
</Text>
<Text
style={{
color: 'white',
fontSize: 13,
marginTop: 5,
maxWidth: '80%',
textAlign: 'center',
lineHeight: 23,
}}>
{item.subtitle}
</Text>
</View>
);
}}
/>
);
});       //<============here
export default Onboarding;