如何在带有钩子的React Native中使用refs?

塞南·兰迪卡(Sennen Randika)

我正在用Hooks开发一个React Native应用程序。(无班)。当使用类时,我们可以像这样创建对子组件的引用。

<Child ref={component => this.childComponent = component} />

但是,当我们使用钩子时该怎么做?

我想要这样的东西。

export default function Child() {
  const foo = () => {
    //do something
  }

  return(
    //something
  )
}


export default function Parent() {
  const myFunc = () => {
    ref.foo();
  }

  return(
    <Child ref={.........} />  //This is what I want to know how to do?
  )
}

希望您能理解我的意思。

Shubham Khatri

为了使用钩子定义引用,您需要使用useRef钩子。而为了参考适用于功能组件,您需要使用forwardRefuseImperativeHandle hook

function Child(props, ref) {
  const foo = () => {
    //do something
  }

  useImperativeHandle(ref, () => ({
     foo
  }));

  return(
    //something
  )
}

export default React.forwardRef(Child)


export default function Parent() {
  const childRef = useRef(null)
  const myFunc = () => {
    childRef.current.foo();
  }

  return(
    <Child ref={childRef} />  
  )
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在带有React的Rails中使用Jasmine?

来自分类Dev

如何在React Native中使用reactfire

来自分类Dev

如何在组件库中使用React钩子?

来自分类Dev

如何测试React的使用效果带有茉莉花和酶的效果钩子

来自分类Dev

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

来自分类Dev

如何在react native中显示带有react native视频的多个视频?

来自分类Dev

如何确保组件内部的常数在带有钩子的React(Native)中仅在启动时计算一次?

来自分类Dev

如何在TypeScript中使用钩子在React PureComponent中键入道具?

来自分类Dev

如何在React / TypeScript中使用钩子进行部分状态更新

来自分类Dev

如何在React中使用带有箭头功能的嵌套组件定义为常量?

来自分类Dev

React Native-使用带有render()的钩子

来自分类Dev

如何在React Native中使用OpenCV

来自分类Dev

如何在ChangeNotifer中使用Flutter钩子

来自分类Dev

如何在React钩子中使用CheckAll复选框创建复选框?

来自分类Dev

如何在getInitialProps中使用Redux钩子

来自分类Dev

如何导出带有钩子的React库组件以在html文件中使用?

来自分类Dev

如何在带有Typescript项目的React JS中使用.env文件?

来自分类Dev

如何使用React钩子创建带有参数的受控输入并传递事件对象?

来自分类Dev

如何使用具有类似变量的React钩子?

来自分类Dev

如何在带有Typescript的React中使用和指定通用挂钩?

来自分类Dev

如何在功能组件的映射中使用React refs?

来自分类Dev

如何在React Native中使用React钩子使用TextInput更改对象数组的特定字符串?

来自分类Dev

在React Native中使用钩子更改文本

来自分类Dev

如何在“地图”中使用React组件的自定义钩子

来自分类Dev

如何使用带有React钩子的Mutex?

来自分类Dev

如何在React与TypeScript中正确使用useState钩子?

来自分类Dev

如何在react native(没有json)中添加带有平面列表的搜索栏?

来自分类Dev

如何在React JS中使用三元运算符在文本中使用带有字体的真棒图标?

来自分类Dev

如何在钩子中使用 ScenarioStepContext?

Related 相关文章

  1. 1

    如何在带有React的Rails中使用Jasmine?

  2. 2

    如何在React Native中使用reactfire

  3. 3

    如何在组件库中使用React钩子?

  4. 4

    如何测试React的使用效果带有茉莉花和酶的效果钩子

  5. 5

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

  6. 6

    如何在react native中显示带有react native视频的多个视频?

  7. 7

    如何确保组件内部的常数在带有钩子的React(Native)中仅在启动时计算一次?

  8. 8

    如何在TypeScript中使用钩子在React PureComponent中键入道具?

  9. 9

    如何在React / TypeScript中使用钩子进行部分状态更新

  10. 10

    如何在React中使用带有箭头功能的嵌套组件定义为常量?

  11. 11

    React Native-使用带有render()的钩子

  12. 12

    如何在React Native中使用OpenCV

  13. 13

    如何在ChangeNotifer中使用Flutter钩子

  14. 14

    如何在React钩子中使用CheckAll复选框创建复选框?

  15. 15

    如何在getInitialProps中使用Redux钩子

  16. 16

    如何导出带有钩子的React库组件以在html文件中使用?

  17. 17

    如何在带有Typescript项目的React JS中使用.env文件?

  18. 18

    如何使用React钩子创建带有参数的受控输入并传递事件对象?

  19. 19

    如何使用具有类似变量的React钩子?

  20. 20

    如何在带有Typescript的React中使用和指定通用挂钩?

  21. 21

    如何在功能组件的映射中使用React refs?

  22. 22

    如何在React Native中使用React钩子使用TextInput更改对象数组的特定字符串?

  23. 23

    在React Native中使用钩子更改文本

  24. 24

    如何在“地图”中使用React组件的自定义钩子

  25. 25

    如何使用带有React钩子的Mutex?

  26. 26

    如何在React与TypeScript中正确使用useState钩子?

  27. 27

    如何在react native(没有json)中添加带有平面列表的搜索栏?

  28. 28

    如何在React JS中使用三元运算符在文本中使用带有字体的真棒图标?

  29. 29

    如何在钩子中使用 ScenarioStepContext?

热门标签

归档