反应forwardRef的含义

时间:2019-06-25 10:09:07

标签: reactjs

我不明白这是什么意思

[core]
sql_alchemy_conn_cmd = bash_command_to_run

如果我能做到这一点:

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

1 个答案:

答案 0 :(得分:0)

来自文档

  

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

     

引用转发是一项可选功能,它使某些组件可以   他们收到的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

阅读更多内容