为什么 node.appendChild() 不起作用？

Question

我有这段代码，稍后将用于在日历中显示日期。我正在尝试动态执行此操作，以便我可以加载当月的日期。我正在使用 reactjs，但我一直收到 appendChild 不是函数的错误。根据文档，我看不出这里有什么问题。 See documentation

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

您在哪里使用了 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 2

这应该适合你：

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>
    );
  }
}

Answer 3

我想这是 Reactjs 特有的事情，或者只是代码执行的时间安排。正如您在@MarkBaijens 的回答中看到的那样，代码在 vanilla js 中确实有效。 @Derek 引导我找到了将我的函数和 DOM 元素放在 componentDidMount() 方法中的解决方案。在反应中，用 DOM 节点初始化变量的地方在该方法内 see documentation.

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>
    );
  }
}

为什么 node.appendChild() 不起作用？

Why is node.appendChild() not working?

javascript

methods

appendchild

reactjs