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

Posted 2023-04-14

【中文标题】如何在 React Native 中使用 React.forwardRef()

【英文标题】：How to use React.forwardRef() in React Native

【发布时间】：2020-05-13 20:39:04

【问题描述】：

我正在使用refs 访问子组件

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

打电话给他们

this.refs._my_refs.scrollToTop();

我收到以下错误

警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

【参考方案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，您应该将 React.createRef() 用于类组件或将 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 周围，则会出现错误

警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

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

【讨论】：

如果子组件是类类型，你能帮我做什么吗？例如class MyComponent extends React.PureComponent

@MahdiBashirpour 是的，但是你需要展示里面的组件是怎样的。而且您知道您以错误的方式使用 ref 吗？您是否看到不能将字符串传递给 ref？也许这就是问题