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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 899 天前的主题，其中的信息可能已经有所发展或是发生改变。

一个修改身高的控件, 可滚动的尺子是用 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 条回复 • 2022-05-23 21:54:06 +08:00

iamzuoxinyu

2022-05-23 21:25:10 +08:00

不是有`useRef`么？

iamzuoxinyu

2022-05-23 21:28:38 +08:00

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

towry

2022-05-23 21:44:40 +08:00

函数式组件暴露一些 API 。

ruller:

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

使用：

```
const rullerRef = useRef(null);

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

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

towry

2022-05-23 21:47:00 +08:00

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

vace

2022-05-23 21:47:53 +08:00

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

yuankui

2022-05-23 21:48:06 +08:00

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

fayetitus

2022-05-23 21:48:18 +08:00

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

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

fayetitus

2022-05-23 21:54:06 +08:00

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