Почему node.appendChild() не работает?

Question

У меня есть этот кусочек кода, который позже будет использоваться, чтобы выкладывать даты в календаре. Я пытаюсь сделать это динамически, чтобы я мог загрузить даты текущего месяца. Я использую responsejs и получаю сообщение об ошибке, что appendChild не является функцией. Я не вижу, что здесь не так, согласно документам, все выглядит правильно. Смотрите документацию

let datesContainer = document.getElementById('display')

function drawCalendar() {
  for (let i = 0; i < 42; i++) {
    let dateNode = document.createElement("div")
    dateNode.textContent = toString(i)
    dateNode.setAttribute("id", "dateNode" + i)
    datesContainer.appendChild(dateNode)
  }
}
drawCalendar()

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="display">
          <div className="d-numbers" id="display">

          </div>
        </div>
      </div>
    );
  }
}

Answer 1

Я предполагаю, что это специфическая вещь Reactjs или просто время выполнения кода. Как видно из ответа @MarkBaijens, код работает в vanilla js. @Derek привел меня к решению, которое заключалось в том, чтобы поместить мою функцию и элемент DOM в componentDidMount() метод. В реакции место инициализации переменной с DOM-узлом находится внутри этого метода, см. Документацию.

class App extends Component {
  componentDidMount() {
    let datesContainer = document.getElementById('display')

    function drawCalendar() {
      for (let i = 0; i < 42; i++) {
        let dateNode = document.createElement("div")
        dateNode.textContent = i
        dateNode.setAttribute("id", "dateNode" + i)
        datesContainer.appendChild(dateNode)
      }
    }
    drawCalendar()
  }
  render() {
    return (
      <div className="App">
        <div className="display">
          <div className="d-numbers" id="display">

          </div>
        </div>
      </div>
    );
  }
}

Answer 2

Вы где используете tostring() функционировать неправильно. Тебе это совсем не нужно, если честно. Javascript делает это автоматически.

let datesContainer = document.getElementById('display');

function drawCalendar() {
  for (let i = 0; i < 42; i++) {
    let dateNode = document.createElement("div");
    dateNode.textContent = i;
    dateNode.setAttribute("id", "dateNode" + i);
    datesContainer.appendChild(dateNode);
  }
}
drawCalendar();

<div id="display"></div>

Answer 3

Это должно работать для вас:

class App extends Component {
  makeCalendarDates = () => {
    const dates = [];
    for (let i = 0; i < 42; i++) {
      const nodeId = `dateNode${i}`;
      dates.push(<div id={nodeId} key={nodeId}>${i}</div>);
    }
    return dates;
  }

  render() {
    return (
      <div className="App">
        <div className="display">
          <div className="d-numbers" id="display">
            {this.makeCalendarDates()}
          </div>
        </div>
      </div>
    );
  }
}