Как в React заставить код над return() выполняться после того, как исполнится код внутри return()?

Question

Нужно, чтобы код над return() выполнялся после того, как будет отрисовано DOM-дерево, описанное внутри return(). Вот пример кода, где DOM отрисовывается позже, что приводит к ошибкам как раз по той причине, что во время выполнения кода у программы не было информации о DOM-элементах.

import React from 'react'

const Test = () => {
    var x = true
    var y = 2
    document.querySelector('.abcd').innerHTML = 'Goodbye'
    function plusplus(n) {
        if (x) {
            console.log(n+y)
            console.log(document.querySelector('.abcd').innerHTML)
        }
    }

    return (
        <div>
            <div className="abcd" onClick={() => plusplus(5)}>Hello</div>
        </div>
    )
}

export default Test

Пробовал брать код над return() и засовывать его в различные "волшебные" функции, которые, судя по гуглению, должны были запускать исполнение кода после отрисовки DOM. Например, пробовал помещать код в функцию document.addEventListener('DOMContentLoaded', function() {ЗДЕСЬ КОД}, false); Однако мне это никак не помогло.

Answer 1

Решил свой вопрос при помощи componentDidMount(){/*Записанный внутри код будет выполнен после того, как отрисуется DOM.*/}

Answer 2

Если через функциональный компонент, то может помочь хук useEffect. Но как и правильно заметили выше, такой функционал можно и нужно, реализовать без обращения к дом напрямую.

import React, { useEffect } from 'react'

const Test = () => {
  let x = true
  let y = 2
  function plusplus(n) {
    if (x) {
        console.log(n+y)
        console.log(document.querySelector('.abcd').innerHTML)
    }
}

  useEffect(()=> {
   
    document.querySelector('.abcd').innerHTML = 'Goodbye'

  })


    return (
        <div>
            <div className="abcd" onClick={() => plusplus(5)}>Hello</div>
        </div>
    )
}

export default Test

БЛОГ НА HUSL

Как в React заставить код над return() выполняться после того, как исполнится код внутри return()?

Ответы (2 шт):