https://github.com/Flowseal/TravelPractice/blob/1f88beb7cbaf2598fa70e6af9affa706245fb5b8/Lesson7%20(React%20Reviews)/src/components/NewReview/NewReview.tsx#L31-L32
В реакте мы фундаментально стараемся как меньше взаимодействовать с DOM, потому что подобные действия разрывают наш флоу работы приложения, и из-за этого оно работает медленнее и менее понятно. Также это недекларативно.
В таком случае обычно выносят всё что тебе нужно в классы в css файл, создают состояние типа isTextAreaHightlighted и в className пришут className={`${isTextAreaHightlighted && "textArea_highlighted"}`}
В данном же случае, тебе надо задавать высоту динамически. Ты можешь сделать состояние textAreaHight типа number, менять его в handleTextChange, а в компоненте сделать переменную textAreaStyles, где и задавать стили, потом передавать это в пропсы.
Примерно так.
Переменная styles будет пересчитываться при каждом рендере, это нормально.
Любые манипуляции с DOM запрещены, элементы нужно брать через ref, а не по id.
Flowseal
commented
1 year ago
https://github.com/Flowseal/TravelPractice/blob/1f88beb7cbaf2598fa70e6af9affa706245fb5b8/Lesson7%20(React%20Reviews)/src/components/NewReview/NewReview.tsx#L31-L32 В реакте мы фундаментально стараемся как меньше взаимодействовать с DOM, потому что подобные действия разрывают наш флоу работы приложения, и из-за этого оно работает медленнее и менее понятно. Также это недекларативно. В таком случае обычно выносят всё что тебе нужно в классы в css файл, создают состояние типа
Переменная styles будет пересчитываться при каждом рендере, это нормально.
Любые манипуляции с DOM запрещены, элементы нужно брать через ref, а не по id.
isTextAreaHightlightedи в className пришутclassName={`${isTextAreaHightlighted && "textArea_highlighted"}`}В данном же случае, тебе надо задавать высоту динамически. Ты можешь сделать состояниеtextAreaHightтипа number, менять его вhandleTextChange, а в компоненте сделать переменнуюtextAreaStyles, где и задавать стили, потом передавать это в пропсы. Примерно так.