尝试将数组转换为列表

Question

我的函数存在问题，该函数将数据从数组转换为不同组件中的列表。我认为问题在于我不了解在哪里放置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;感谢您的帮助和理解！

Answer 1

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

function makeList(array) {

    return (

        <ul>

            (array.map((value, index) => (<li>{value}</li>)

        </ul>

    )

}

或者一个完整的、更优化的解决方案是创建一个Breakfast组件：

class Stuff extends Component {

    constructor(props) {

        super(props);

        this.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']

                },

            ]

        }

    }

    render() {

        return (

            <div>

                <Day source={this.source}></Day>

            </div>

        );

    }

}

class Day extends Component {

    render() {

        return (

            <div className="displayOne">

                {this.props.source.breakfast.map((breakfast) => <Breakfast breakfast={breakfast}/>)}

            </div>

        );

    }

}

function Breakfast({breakfast}) {

    return (

        <div className="displayOne">

            <img src={breakfast.img} alt="eggs"/>

            <h3>{breakfast.description}</h3>

            <ul>

                {breakfast.ingridients.map((ingridient) => <li>{ingridient}</li>)}

            </ul>

        </div>

    )

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>