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中看到的那样，该代码确实在香草js中有效。 @Derek带我去了一个解决方案，该解决方案是将我的函数和DOM元素放在componentDidMount()方法中。作为响应，在该方法see documentation中使用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>
    );
  }
}

为什么node.appendChild（）不起作用？

3 个答案: