React / React Native: Как использовать функцию обратного вызова в функциональном компоненте?

Question

В этой библиотеке: https://github.com/wix/react-native-keyboard-aware-scrollview

Из этих двух строк кода, указанных в файле readme ( Автоматическая прокрутка для компонентов TextInput * секция 1007 *), родительский элемент Компонент может получить массив ref дочерних элементов, используя технику обратного вызова:

<KeyboardAwareScrollView 
    style={styles.container} 
    getTextInputRefs={() => { return [this._textInputRef];}}
>
    <TextInput 
        style={styles.textInput} 
        placeholder={'My Input'} 
        ref={(r) => { this._textInputRef = r; }}
    />

</KeyboardAwareScrollView>

getTextInputRefs - это обратный вызов, в котором вы можете вернуть массив ссылок на дочерние компоненты TextInput, которые лежат внутри scrollView. .

Однако, насколько я понимаю, в функциональном компоненте нет такой вещи, как this._textInputRef. Как сделать то же самое, в котором родительский scrollview и дочерние входы являются функциональными компонентами?

Не обязательно использовать это в качестве примера, но будет здорово использовать его.

Любое подтверждение концепции приветствуется.

Answer 1

Вы можете использовать useRef крючок .

Например:

export default () => {
    const textInputRef = React.useRef(null);
    return (
        <KeyboardAwareScrollView 
            style={styles.container} 
            getTextInputRefs={() => { return [textInputRef];}}
        >
            <TextInput 
                style={styles.textInput} 
                placeholder={'My Input'} 
                ref={textInputRef}
            />
        </KeyboardAwareScrollView>
    );
}

Answer 2

Вот пример использования ссылок в функциональном компоненте.

const MyComponent = () => {
  const textRef = React.useRef();

  return (
    <KeyboardAwareScrollView getTextInpurRefs={() => [textRef]}>
      <TextInput ref={textRef} />
    </KeyboardAwareScrollView>
  )
}