如何在反应原生的功能组件中使用 forwardRef？

Posted 2023-02-25

【中文标题】如何在反应原生的功能组件中使用 forwardRef？

【英文标题】：How can I use forwardRef in functional component in react native?

【发布时间】：2021-03-09 20:57:51

【问题描述】：

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

我尝试在父组件中创建一个 ref，如下所示：

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 的，或者它们使用类组件，而我没有尝试过任何工作。我该怎么做？

【参考方案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，它使用了功能组件。

【讨论】：

成功了，你。我已经尝试过这种方式，但我想我是在尝试使用 export default function FormInput = React.forwardRef 而不是 const FormInput = React.forwardRef