React forwardRef 含义

Posted

技术标签:

【中文标题】React forwardRef 含义【英文标题】:React forwardRef meaning 【发布时间】:2019-11-07 03:33:34 【问题描述】:

我不明白这是什么意思:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref=ref className="FancyButton">
    props.children
  </button>
));

如果我能做到:

function FancyButton(props) 
  return (
    <button className="FancyButton" ref=props.ref>
      props.children
    </button>
  );

【问题讨论】:

您应该在父组件中 createRef 并使用 forwardRef 将其链接到子组件中 【参考方案1】:

来自文档

引用转发是一种自动传递引用的技术 一个子组件的组件。

Ref 转发是一项可选功能,它允许某些组件获取 ref 他们收到,并进一步向下传递(换句话说,“转发” 它)给一个孩子。

关于你的问题

我不明白这是什么意思:如果我能做到:。

您可以选择第一种方法或第二种方法

例子

// EmailInput wraps an html `input` and adds some app-specific styling.
const EmailInput = React.forwardRef((props, ref) => (
  <input ref=ref ...props type="email" className="AppEmailInput" />
));

class App extends Component 
  emailRef = React.createRef();

  render() 
    return (
      <div>
        <EmailInput ref=this.emailRef />
        <button onClick=() => this.onClickButton()>
          Click me to focus email
        </button>
      </div>
    );
  

  // `this.emailRef.current` points to the `input` component inside of EmailInput,
  // because EmailInput is forwarding its ref via the `React.forwardRef` callback.
  onClickButton() 
    this.emailRef.current.focus();
  

对我来说,fowardRef 不需要太多,因为我们总是可以使用另一种方法传递 ref

您可以在here阅读更多内容

【讨论】:

在我看来,forwardRef 是必需的,因为只有一些低级元素的反应组件上没有 this.props.ref,功能组件上也没有。但我认为它一直有效。 @TonyNgo,那篇文章内容丰富,正是我想要的。有趣的是,官方文档没有提到将 refs 作为普通道具传递,但听起来这实际上比使用 forwardRef 还好(如果不是更好)。

以上是关于React forwardRef 含义的主要内容,如果未能解决你的问题,请参考以下文章

将 React forwardRef 与 Redux 连接一起使用

[react] 什么是React.forwardRef?它有什么作用?

React Ref 和 React forwardRef

React中React.forwardRef的使用方式

React.forwardRef与useImperativeHandle

在 React 中使用 forwardRef() 渲染的具体内容