Как использовать React.forwardRef () в React Native

Я использую refs для доступа к дочернему компоненту

<MyComponent
   ref='_my_refs'
   ...
/>

и позвони им

this.refs._my_refs.scrollToTop();

Я получаю ошибку ниже

Предупреждение: функциональным компонентам нельзя давать ссылки. Попытки получить доступ к этой ссылке потерпят неудачу. Вы хотели использовать React.forwardRef ()?


person Mahdi Bashirpour    schedule 28.01.2020    source источник


Ответы (1)


Вам нужно обернуть MyComponent вокруг React.createRef()

e.g.

const MyComponent = React.forwardRef((props, ref) => {
    return (
        <View ref={ref}> // using the ref
            // your component 
        </View>
})

Кроме того, ref='_my_refs' не работает, это должно быть React.createRef() или, если это функциональный компонент useRef.

e.g.

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this._my_refs = React.createRef();
    }

    render(){
        return (
            // ...
            <MyComponent
                ref={ref => this._my_refs = ref}
                ...
            />
        )
    }
}

OR

const ParentComponent = props => {
    const myRef = React.useRef()    
    return (
        // ...
        <MyComponent
            ref={ref}
            ...
        />
    )
}

Если вы передадите ref функциональному компоненту, и он не будет заключен в React.forwardRef, он выдаст вам ошибку

Предупреждение: функциональным компонентам нельзя давать ссылки. Попытки получить доступ к этой ссылке потерпят неудачу. Вы хотели использовать React.forwardRef ()?

А это означает, что MyComponent является функциональным компонентом и не оборачивается вокруг React.forwardRef.

person Vencovsky    schedule 28.01.2020
comment
Вы можете мне помочь, что делать, если дочерний компонент относится к типу класса. например class MyComponent extends React.PureComponent - person Mahdi Bashirpour; 28.01.2020
comment
@MahdiBashirpour да, но вам нужно показать, как компонент внутри. И вы знаете, что неправильно используете ref? Вы видели, что в ref нельзя передать строку? Может в этом проблема - person Vencovsky; 28.01.2020