Functional Component 如何像 Class Component 一样通过 ref 获取 instance 呢?

› React

This topic created in 1477 days ago, the information mentioned may be changed or developed.

一个修改身高的控件, 可滚动的尺子是用 ScrollView 来实现的, 在父组件中有个单位切换的按钮, 切换单位时会调整默认的身高数值并且滚动尺子到指定位置. 比如用户调整 ft 到 cm, 数值会变成 170 并且尺子也会滚动到 170 (包括下面的单位数值也会变).

如果这是一个 class component:

<ChangeUnitButtons onClick={()=> { rullerRef.current.changeUnit() }} />
<Ruller ref={rullerRef} />

class Ruller extends React.Component {
    changeUnit() {
    	scrollViewRef.current.scrollTo(someCalculatedValue);
    }
    render() {
      return (
    	<ScrollView ref={scrollViewRef} />
      );
    }
}

但这个控件是用 Functional Component 实现的, 不能通过 ref 来获取 instance 然后 instance.someMethod 来调用内部方法.

查了下 React 的文档, 可以通过 useImperativeHandle 这个 hook 配合 forwardRef 来实现这种需求.

但 useImperativeHandle 是用来做这个事情的吗? 虽然是可以用来做这个事情, 但查了下文档, 其设计目的不是用来做这个事情的:

useImperativeHandle customizes the instance value that is exposed to parent components when using ref

所以上面这种需求应该怎么处理? 有什么 workaround?

考虑过:

不同的单位渲染不同的 Ruller 控件, 比如 {unit === 'cm' ? <Ruller /> : <Ruller />}
将单位也封装到控件中

8 replies • 2022-05-23 21:54:06 +08:00

iamzuoxinyu

May 23, 2022

不是有`useRef`么？

iamzuoxinyu

May 23, 2022

噢，抱歉，没仔细看。简单地，将单位和数值当作 props 传进去不行么？

towry

May 23, 2022

函数式组件暴露一些 API 。

ruller:

`props.ref && props.ref({ api1: () => {} });`

使用：

```
const rullerRef = useRef(null);

if (rullerRef) { rullerRef.current.api1() }

<ruller ref={(ref) => rullerRef.current = ref } />
```

towry

May 23, 2022

```
useEffect(() => {
// set ref to outer on mounted
props.ref && props.ref({ api1: () => { // do something })
}, []);
```

vace

May 23, 2022

很多方式。
0. 直接 props/provider 传值
1. scrollViewef.current 是 dom 的话（比如 div ），可以用 forwardRef ，父组件直接用 ref 引用子组件的 dom 方法。
2. useImperativeHandle 是自定义暴露给父组件的实例值，也就是子组件可以让父组件引用任意自定义的数据或者方法。（没有不推荐吧，看场景，少写 ref 的命令式代码）
3. 父组件创建自定义 ref ，用 props 传递

yuankui

May 23, 2022

```
interface RuleProps {
value: number;
type: 'cm' | 'ft';
}
```
楼上正解

fayetitus

May 23, 2022

如果你真的真的真的真的真的很确信你需要这样做，那么 useImperativeHandle 就是用来做这个事情的：你希望子组件向父组件暴露一个实例的 value ，而 method 显然是 value 。不论是文档，样例，社区讨论，你的用法都符合设计意图。例如 https://stackoverflow.com/questions/37949981/call-child-method-from-parent 的高赞答案。

“如果你真的真的真的真的真的很确信你需要这样做”的意思是：你很忙，没空重塑自己的心智，没空思考其他的办法，你一定想要——让父组件调用子组件的函数。

fayetitus

May 23, 2022

彩蛋：useImperativeHandle 的曾用名是 useImperativeMethods ，这个曾用名听上去是不是更像你想要的东西？