尝试将数组转换为列表

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>