React Js: использование ссылок вместо идентификатора

Question

Я использовал ID для доступа к элементу span, затем я обнаружил, что мы не можем использовать идентификаторы, и вместо этого мы должны использовать refs, но после запуска этого кода появляется ошибка Uncaught ReferenceError: heroSkills is not defined

export default class Home extends Component {
    constructor(){
        super();
        this.heroSkills = React.createRef();
        let typewriter = new Typewriter(heroSkills, {
            loop: true
        });
    render() {
       return <span ref={this.heroSkills}></span>;
    }
}

Answer 1

export default class Home extends Component {
  constructor() {
    super();
    this.heroSkills = React.createRef();
    let typewriter = new Typewriter(this.heroSkills.current, {
      loop: true
    });
  }
  render() {
    return <span ref={this.heroSkills} />;
  }
}

Answer 2

Когда ссылка передается элементу в рендере, ссылка на узел становится доступной в текущем атрибуте ссылки.

https://reactjs.org/docs/refs-and-the-dom.html

Вместо:

let typewriter = new Typewriter(heroSkills, {
  loop: true
});

до:

let typewriter = new Typewriter(this.heroSkills.current, {
  loop: true
});

Answer 3

export default class Home extends Component {
  constructor() {
    super();
    this.heroSkills = React.createRef();
  }
  componentDidMount() {
    let typewriter = new Typewriter(this.heroSkills.instance, {
      loop: true
    });
  }
  render() {
    return <span ref={this.heroSkills}></span>;
  }
}