如何在 React Native 的功能组件中使用 forwardRef？

Question

我制作了以下屏幕，其中每个标签 + 输入组合都在一个子组件内。当我单击保存 (salvar) 时，我想检查每个组件的引用以查看它是否将“isInvalid”变量设置为 true，然后将边框涂成红色并显示一条错误消息。这意味着该字段是必需的，等等

我试过像这样在父组件中创建一个引用：

export default function DiaryExam({ navigation }) {

let examNameRef =  useRef();

return (
    <Page type="static" title={'Avaliação'} subtitle={'Editar'}>
            <FormInput ref={examNameRef} inputType="text" title={"Nome da avaliação"} value={name} setValue={setName} required />
            //I'll add the other refs below later
            <FormInput inputType="text" title={"Código"} value={code} setValue={setCode} maxLength={8} required/>
            <FormInput inputType="number" title={"Nota máxima"} value={maxGrade} setValue={setMaxGrade} />
            <FormInput inputType="number" title={"Peso"} value={weight} setValue={setWeight} required />
            <FormInput inputType="date" title={"Data de Início"} value={startDate} setValue={setStartDate} />
            <FormInput inputType="date" title={"Data de Fim"} value={endDate} setValue={setEndDate} />
            <FormInput inputType="switch" title={"Ignorar na Fórmula"} value={ignoreFormula} setValue={setIgnoreFormula} />
            <Button style={[styles.button, {}]} textStyle={styles.buttonText} title={'Salvar'} onPress={() => saveExam()} requestFeedback />
    </Page>
);

在子组件中我有这样的东西（除其他外）：

export default function FormInput ({ inputType, title, value, setValue, required, maxLength, ref }) {

return (
    <View>
        {(inputType === 'text' || inputType === 'number') && (
            <View>
                <Text ref={ref} style={[styles.fieldValue, { borderColor: requiredValidationError ? 'red' : 'grey' }]}>{value}</Text>
                <Text style={[{ alignSelf: 'flex-end', backgroundColor: 'white', color: requiredValidationError ? 'red' : 'grey' }]}>{requiredValidationError? 'Campo obrigatório' : ''}</Text>
            </View>
        )}
        </View>
)

如果 'required' 属性为真，我需要查看 'value' 变量是否为 length === 0，然后设置 setRequiredValidationError(true) 以便相应地更改布局。

但我得到的只是控制台中的以下错误：

[Tue Mar 09 2021 17:21:48.858]  ERROR    Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

我用谷歌搜索了 React Native forwardRef，但所有示例和文档都是针对传统 React 的，或者它们使用 class 组件，但我尝试过的都不起作用。我该怎么做？

Answer 1

根据警告，您需要使用 React.forwardRef。你可以这样做：

const FormInput = React.forwardRef(({ 
    inputType, 
    title, 
    value,
    setValue, 
    required, 
    maxLength
}, ref) => {
    return (
        {(inputType === 'text' || inputType === 'number') && (
            <View>
                <Text ref={ref} style={[styles.fieldValue, { borderColor: requiredValidationError ? 'red' : 'grey' }]}>{value}</Text>
                <Text style={[{ alignSelf: 'flex-end', backgroundColor: 'white', color: requiredValidationError ? 'red' : 'grey' }]}>{requiredValidationError? 'Campo obrigatório' : ''}</Text>
            </View>
        )}
    )
}

React doc 中的更多信息，其中使用了功能组件。

如何在 React Native 的功能组件中使用 forwardRef？

How can I use forwardRef in functional component in react native?

react-native

react-hooks

use-ref