我的函數存在問題，該函數將數據從數組轉換為不同組件中的列表。我認為問題在于我不了解在哪里放置document.GetElementById(). 會出現錯誤document.getElementById(...) is null。是因為我嘗試在渲染之前訪問特定位置嗎？那我應該如何訪問它，也許它與組件生命周期有關？這是我的代碼：import React, { Component } from 'react';import Day from "./day";import image1 from "./img/eggs.jpg";class Stuff extends Component {  constructor(props){    super(props);    this.makeList = this.makeList.bind(this);  }     makeList(array) {      var list = document.createElement('ul');      for (var i = 0; i < array.length; i++) {          var item = document.createElement('li');          item.appendChild(document.createTextNode(array[i]));          list.appendChild(item);      }      return list;  }  render() {    const source =  {        breakfast: [          {            id: 1,            name: "eggs",            img: image1,            description: "Start a day with delicious and nutricious eggs!",            ingridients: ['2 eggs', 'two slices of toast', 'bacon', 'butter']          },          ...        ]}    return (      <div>        <Day {...source}             makeList={this.makeList} />      </div>    );  }}export default Stuff;和 Day 組件，React 發生錯誤：import React, { Component } from 'react';import "./day.css";class Day extends Component {  render() {    const appChild = document.getElementById('foo').appendChild(this.props.makeList(this.props.source.breakfast.ingridients));    return (        <div className="displayOne">          <img src= {this.props.breakfast[0].img} alt="eggs" />          <h3>{this.props.breakfast[0].description}</h3>          <div id="foo">          <p>{appChild}</p>          </div>        </div>    );  }}export default Day;感謝您的幫助和理解！