Question

所以我正在关注Max在Udemy上的视频教程，并在其中一个讲座中试图解释 Ref Api的反应16.3

所以这就是他所做的，在容器类（不是App.js）的内部，他创建了一个名为this.lastref = React.createRef();的属性，然后在返回的JSX代码中创建了一个ref标签，看起来像这样{{1 } （这是父组件）

现在在子组件中，他创建了一个类似于此

的方法

ref={this.lastref}

然后在父组件中，他再次在 componentDidMount生命周期

中做了类似的事情

myFocus () {
 this.lastref.current.focus() 
 }

现在我有两个问题。

[问题部分]

首先：他如何在子组件中使用this.lastref？这是因为从父母到孩子的单向（或单向）流动 componentDidMount() { this.lastref.current.myFocus() } ？

第二次：(this.lastPersonRef is referred from ref={this.lastPersonRef}我认为恰好是静态方法，所以在使用它之前不应该启动它吗？

[代码示例]

以下是父组件的外观 - ＆gt; [person.js]

myFocus

和这应该是我的子组件 - ＆gt; [人-s.js]

import React, { Component } from 'react';
import Person from './persons/person-s';

class Cpersons extends Component {
this.lastref = React.createRef()

  componentDidMount() {
this.lastref.current.myFocus()
}

render (
return {
<Person
        key={el.id}
        click={this.props.cpdelete.bind(index)}
        ref={this.lastref}
        name={el.name}
        age={el.age}
        changed={(event) => this.props.cpchanged(event, el.id)} />
      });
    }
  }

export default Cpersons

Answer 1

ref在React世界中发生了很大变化，有关它的文档很不一样。我建议你使用回调方法。

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.otherComponentRef = null; // Will be set after the first render
    }
    render() {
        return [
            <OtherComponent ref={el => this.otherComponentRef = el} />,
            <ChildComponent reference={this.otherComponentRef} />
        ];
    }
}

Answer 2

首先：他如何在子组件中使用this.lastref？是因为父级到子级的单向（或单向）流（this.lastPersonRef是从ref = {this.lastPersonRef}引用的？

在这样的类组件内部创建引用时，

this.myRef = React.CreateRef();

为

this.myRef分配了一个null值。稍后在安装组件时，React为this.myRef分配一个具有current属性的对象，从而使this.myRef.current一个包含的对象

dom元素 ，或
引用附加的组件

在您的代码中，lastref像这样被附加到Person组件上，

<Person ref={this.lastref} .../>

在

componentDidMount() {
  this.lastref.current.myFocus()
}

像这样，React将Person实例（组件）分配给this.lastref.current

// ~ with a bit of React magic under the hood
this.lastref.current = new Person();

由于myFocus是实例上的方法，因此this.lastref.current.myFocus()可以调用它

我建议您从React docs阅读有关 React Ref 及其预期行为的更多信息。如果您发现自己陷入困境，则可以阅读有关class inheritance在Javascript中的工作方式的信息，从而可以更深入地了解幕后情况。

第二：myFocus我相信碰巧是静态方法，所以他不应该在使用之前先启动它吗？

这实际上只是其他Javascript规范中使用的语法

class P {
  constructor(props) {
    super();
    this.myRef = props.myRef
  }
  myFocus() {
    console.log(this.myRef)
  }
}

等效于

class P {
  myFocus() {
    console.log(this.props.myRef)
  }
}

在Babel的babel-loader看来，

将Javascript转换为使用create-react-app创建的典型React应用程序。在这两种情况下，myFocus都是实例的实例方法。

React Ref Api＆＃39; s

2 个答案: