Почему поведение методов DOM не определено в функции, которая отображает элемент в React?

Question

Я просто пытался использовать методы документа, такие как getElementsByClassName, getElementsByTagName, getElementById, и утешал вывод.Однако странно то, что только getElementById не работает, он регистрирует null.Я пробовал className с App и TagName h1, работает отлично.Кто-нибудь может пролить свет на это?Это песочница для кода [https://codesandbox.io/s/813mnx1vq2].

Ниже мой код App, который я рендеринг,

function App() {

  { console.log(document.getElementById('heading1')) }

  /*
  { console.log(document.getElementsByTagName("h1")) }
  // Output: HtmlCollection array which contains element with id=heading1
  */

  /*
  { console.log(document.getElementsByClassName("App")) }
  // Output: HtmlCollection array which contains div.App element
  */

  return (
    <div  className="App">
      <h1 id="heading1">Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

    </div>
  );

}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

PS Редактировать: Когда работает NodeList и когда он статичен? .Спасибо Джонасу.

Answer 1

Существует два типа различных структур данных, возвращаемых этими методами, один - NodeList, другой - один отдельный узел.Особенность NodeLists состоит в том, что они являются живыми, что означает, что если узел добавляется в DOM, он также добавляется в NodeList.В консоли вы видите живую версию записанных вещей, поэтому вы также видите элементы, которых еще нет в DOM с getElementsByTagName, и вы не получите результата с getElementByID.

Тем не менее, вы не должныиспользовать их вообще при использовании React.

Answer 2

Узел DOM недоступен к моменту вызова getElementById.

Простое решение - преобразовать компонент в компонент класса и использовать метод жизненного цикла componentDidMount.

class App extends React.Component {
   componentDidMount() {
       console.log(document.getElementById('heading1'))
   }
   render() {
      return (
        <div  className="App">
          <h1 id="heading1">Hello CodeSandbox</h1>

          <h2>Start editing to see some magic happen!</h2>

        </div>
      );
   }
}

Если вам строго необходим функциональный компонент, есть библиотека, которая предоставляет доступ к методам жизненного цикла внутри функционального компонента, которая называется Reaction-pure-lifecycle