Как записать в переменную html-элемент отрендеренную Реактом?

Question

[konstantinst13]

Мне нужно записать в переменные элементы, которые рендерятся и имеют className. Как это сделать? Я переношу свой проект на React и это меня озадачивает.

import React, {
    Component
} from 'react';

export default class Header extends Component {
    constructor() {
        super();
        let createText = document.querySelector(".create-page-text"),
            createBtn = document.querySelector(".create-page-btn"),
            headersArea = document.querySelector('.create-page-area');

    }
    render() {
        return ( 
            <header className = "header" >
                    <nav className = "nav" >
                         <input type = "text" className = "create-page-text" ></input> 
                         <button className = "create-page-btn" > Создать страницу </button> 
                    </nav> 
                <div className = "create-page-area" > < /div>
            </header>
        )
    }
}

Answer 1

[Дмитрий]

С помощью ref-ов
https://learn-reactjs.ru/core/refs-and-the-dom

Пример:

class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }
    render() {
      return <div className={"someClass"} ref={this.myRef} />;
    }
  }

this.myRef.current будет содержать ссылку на элемент с классом someClass

Comments

[konstantinst13]

Спасибо!
А как импортировать этот компонент в другой файл, чтобы иметь доступ к
this.myRef = React.createRef();
?

[Дмитрий]

konstantinst13, как обычно, объявите переменную вне компонента с приставкой export, присвойте ей нужное значение и будете иметь к ней доступ из других файлов