关于react 函数组件内部方法的调用

PainAndLove
  • 358

代码结构如下

<Button/>
<Target/>

-- Target.js --
const Target = props => {...}

目的是想触发Button的onClick事件里执行某些Target组件中的方法,可是Target组件为了效率写成了函数式组件,无法通过this.refs.xxx来调用Target组件的方法。。。
除了改成class Target的方式还有别的解决方法么?

回复
阅读 10.8k
4 个回答

一般来说,直接写成函数组件,在未来需求变更快速的情况下,几乎是不可能保持该组件自身还是函数的。

符合React设计思想的常用方案有两种:

  1. Target组件包含Button组件,即Button组件是Target组件的子组件,Button的onclick行为由父组件Target决定。
  2. 需要调用Target组件的方法,说明有些Target和Button共享的状态保存到了Target组件中,这种情况下,应该使用状态提升方法,将Target组件维护的共享状态提升到Target和Button共同的父组件中,Target和Button通过调用父组件的方法改变共享状态,父组件通过传递props影响Target和Button的渲染。
yoyo837
  • 2
新手上路,请多包涵

React.forwardRef?

Shushushu
  • 1
新手上路,请多包涵

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏