Javascript 试图将数组转换为列表

我的函数有一个问题，它将数组中的数据转换为不同组件中的列表。 我认为问题在于我不理解将

document.GetElementById（）放在哪里。

我收到错误

文档。getElementById（…）为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;

import React，{Component}来自'React'；
从“/”导入日期；
从“/img/eggs.jpg”导入image1；
类扩展组件{
建造师（道具）{
超级（道具）；
this.makeList=this.makeList.bind（this）；
}
生成列表（数组）{
var list=document.createElement（'ul'）；
对于（var i=0；i

和反应返回错误的日期组件：

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;

import React，{Component}来自'React'；
导入“/day.css”；
课程日扩展组件{
render（）{
const-appChild=document.getElementById（'foo'）.appendChild（this.props.makeList（this.props.source.breaken.ingridients））；
返回(
{this.props.早餐[0].说明}
{appChild}

);
}
}
出口违约日；

---

谢谢你的帮助和理解

您可能应该使用jsx，而不是直接操作dom：

function makeList(array) {
    return (
        <ul>
            (array.map((value, index) => (<li>{value}</li>)
        </ul>
    )
}

为什么你们都在使用JSX并直接创建DOM？你们是对的。我真的不知道这是我制作的第一个完整的网站，我没有仔细考虑。谢谢你的回答。当然它会工作，但我想做一个对象数组：早餐，晚餐和晚餐，3个不同的div，一个接一个，将显示从这些对象和箭头的数据在右侧和左侧网站，将切换食谱。我对网络开发还是个新手，我只读了一本书，还上了编解码器的课程，所以仍然有很多困惑。