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

Question

代码结构如下

<Button/>
<Target/>

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

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

Answer 1

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

Answer 2

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

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

Answer 3

React.forwardRef?

Answer 4