Как пользоваться querySelector в React?

Question

[Anim826]

Нужно взять текст из дива в JSX, написал вот такой код ниже функции с JSX:

import React from 'react';
import './App.css'

function App() {
    return(
        <div className='App'>
            <h3 className='text'>Text1</h3>
            <h3>Text: {text}</h3>
        </div>
    );
}

const text = document.querySelector('.text');


export default App;

Как мне брать текст из классов в React? И обращаться к классам и как то с ними манипулировать.

Comments

[Константин Б.]

Зачем?)

[Василий Банников]

Серьёзно, зачем вам это нужно? Реакт - это не жиквери и в нормальной ситуации нет никакой необходимости вытаскивать текст из тегов.
Обычно реакт используется как-то так:

import React from 'react';
import './App.css'

const App = ({bottomText, topText}) =>
  <div className="App">
    <h3 className="text">{topText}</h3>
    <h3>Text: {bottomText}</h3>
  </div>;
export default App;

А потом в другом месте
<App topText="Foo" bottomText="Bar"/>

[n1ksON]

Вместо того, чтобы брать текст из JSX, передавайте туда и в другие места необходимый текст, который будете хранить в state.

Answer 1

[Тигран Абрамян]

нет смысла использовать реакт если вы к контенту обращаетесь через .querySelector вместо этого создайте хук useState храните в нем ваше значение и используйте переменную где хотите. При необходимых ситуациях можно и изменять это значение

пример создания и использования
const [ text, setText ] = React.useState('Text1');

<h3 className='text'>{text}</h3>

если нужно изменять просто напишите
setText('новый текст');

да и не помешало бы чтения документации секции хуков

Comments

[Speakermen]

Спасибо помогло, много лишнего кода выбросил с querySelector и класс почистил от методов ненужных. Теперь я понял в чем их преимущества

Answer 2

[Василий Банников]

Можно так:
https://stackoverflow.com/questions/61634308/alter...
Но это не частый способ использования реакта. Старайтесь избегать такого подхода по возможности.