Refs转发
概述
- 将ref自动地通过组件传递到子组件的技巧
- 父组件可以通过ref操作子组件,直接使用子组件的DOM
转发 refs 到 DOM 组件
- 渲染原生 DOM 元素 button 的 FancyButton 组件(子组件)
function FancyButton(props) {return (<button className="FancyButton">{props.children}</button>)
}
- Ref 转发是一个可选特性,其允许某些组件接收 ref,并将其向下传递给子组件
const FancyButton = React.forwardRef((props, ref) => (<button ref={ref} className="FancyButton">{props.children}</button>
))
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
- 以下是对上述示例发生情况的逐步解释:
-
- 通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量
-
- 指定 ref 为 JSX 属性,将其向下传递给 FancyButton
-
- React传递ref给forwardRef作为其第二个参数
-
- 向下转发ref参数到button,并将其指定为JSX属性
-
- 当ref挂载完成,ref.current将指向button DOM节点
组件库维护者的注意事项
- 当使用forwardRf时,应将其视为一个新的主版本
在高阶组件中转发 refs
在 DevTools 中显示自定义名称
- 下面的组件将在DevTools中显示为“ForwardRef”
const WrappedComponent = React.forwardRef((props, ref) => {return <LogProps {...props} forwardedRef={ref} />;
})
- 如果命名了渲染函数,DevTools 也将包含其名称(例如 “ForwardRef(myFunction)”)
const WrappedComponent = React.forwardRef(function myFunction(props, ref) {return <LogProps {...props} forwardedRef={ref} />;}
)
- 设置函数的 displayName 属性来包含被包裹组件的名称
function logProps(Component) {class LogProps extends React.Component {}function forwardRef(props, ref) {return <LogProps {...props} forwardedRef={ref} />;}const name = Component.displayName || Component.name;forwardRef.displayName = `logProps(${name})`;return React.forwardRef(forwardRef);
}