如何在 React Native 中使用 React.forwardRef()

Question

我正在使用 refs 访问子组件

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

并打电话给他们

this.refs._my_refs.scrollToTop();

我收到以下错误

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Answer 1

您需要将 MyComponent 环绕在 React.forwardRef()

周围

例如

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

此外，ref='_my_refs' 不起作用，因为它是功能组件的 legacy ref, you should use React.createRef() for class components or useRef。
您可以在 docs.

中查看更多详细信息

例如

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

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

或

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

如果您将 ref 传递给功能组件并且它没有包裹在 React.forwardRef 周围，它将给您错误

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

这意味着 MyComponent 是一个功能组件，并没有包裹在 React.forwardRef 周围。

如何在 React Native 中使用 React.forwardRef()

How to use React.forwardRef() in React Native

javascript

reactjs

react-native

react-ref