Question

所以我正在学习一些React教程，讲师正试图解释前向API和参考API。

所以我们有一个看起来像这样的孩子

import React, { Component } from 'react';

class Cppersons extends Component {

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

 render() {

 //something

 return (

 <div> Something </div>

   )
  }
}
export default Cppersons;

注意：以上代码

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

在上面的代码中，我们首先在父组件上创建了this.lastref，因此我认为它来自那里（将ref从父级传递给子级）这是父组件

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

所以我的问题是，当孩子们定义方法时，我们如何在父母中使用myFocus？加上myFocus如何在这里工作？

Answer 1

正如DOC所说。 ref的值根据节点的类型而不同：

当在HTML元素上使用ref属性时，在构造函数中使用React.createRef（）创建的引用将接收底层DOM元素作为其当前属性。
当ref属性用于自定义类组件时，ref对象接收组件的已安装实例作为其当前。

所以说，通过查看你的代码，你在自定义类组件中使用ref，这意味着this.lastref.current是Person的一个实例。在你的情况下，你正在调用this.lastref.current.myFocus（）。我希望你已经在Person类中定义了myFocus方法。在Person上使用ref意味着您可以调用在Person Component中定义的任何方法。

在React中导入/导出

1 个答案: