Refs转发

概述

• 将ref自动地通过组件传递到子组件的技巧
• 父组件可以通过ref操作子组件，直接使用子组件的DOM

转发 refs 到 DOM 组件

• 渲染原生 DOM 元素 button 的 FancyButton 组件（子组件）

function FancyButton(props) {return ({props.children})
}

• Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递给子组件

//子组件
const FancyButton = React.forwardRef((props, ref) => (ref} className="FancyButton">{props.children}
))//父组件
//可以直接获取 DOM button 的 ref：
const ref = React.createRef();
ref}>Click me!;//这样，在父组件中可以直接使用DOM button

• 以下是对上述示例发生情况的逐步解释：
• • 通过调用 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 ...props} forwardedRef={ref} />;
})

• 如果命名了渲染函数，DevTools 也将包含其名称（例如 “ForwardRef(myFunction)”）

const WrappedComponent = React.forwardRef(function myFunction(props, ref) {return ...props} forwardedRef={ref} />;}
)

• 设置函数的 displayName 属性来包含被包裹组件的名称

function logProps(Component) {class LogProps extends React.Component {// ...}function forwardRef(props, ref) {return ...props} forwardedRef={ref} />;}// 在 DevTools 中为该组件提供一个更有用的显示名。// 例如 “ForwardRef(logProps(MyComponent))”const name = Component.displayName || Component.name;forwardRef.displayName = `logProps(${name})`;return React.forwardRef(forwardRef);
}