Reactjs 根据状态将组件动态添加到react页面_Reactjs

Reactjs 根据状态将组件动态添加到react页面

reactjs

Reactjs 根据状态将组件动态添加到react页面,reactjs,Reactjs,因此，我正在通过Udemy学习react，讲师编写了以下代码，以使用状态动态呈现汉堡成分的内容。基本上，他将状态对象转换为数组，并使用该数组渲染内容 import React from "react"; import classes from "./Burger.css"; import BurgerIngredient from "./BurgerIngredients/BurgerIngr"; const burger = (props) => { const transform

因此，我正在通过Udemy学习react，讲师编写了以下代码，以使用状态动态呈现汉堡成分的内容。基本上，他将状态对象转换为数组，并使用该数组渲染内容

import React from "react";
import classes from "./Burger.css";
import BurgerIngredient from "./BurgerIngredients/BurgerIngr";

const burger = (props) => {
  const transformedIngr = Object.keys(props.ingredients).map((igKey) => {
    return [...Array(props.ingredients[igKey])].map((_, i) => {
      return <BurgerIngredient key={igKey + i} type={igKey} />;
    });
  });

  return (
    <div className={classes.Burger}>
      <BurgerIngredient type="bread-top" />
      {transformedIngr}
      <BurgerIngredient type="bread-bottom" />
    </div>
  );
};

export default burger;

//Object.entries(props.ingredients).map((indexOne, indexTwo)

有人能给我解释一下现有的代码吗？有没有可能使用Object.entries来简化它？或任何其他替代方法来做同样的事情

BurgerBuilder.js

import React, { Component } from "react";
import Aux from "../../hoc/aux";
import Burger from "../../components/Burger/Burger";

class BurgerBuilder extends Component {
  state = {
    ingredients: {
      meat: 1,
      salad: 2,
      cheese: 1,
      bacon: 1,
    },
  };

  render() {
    return (
      <Aux>
        <Burger ingredients={this.state.ingredients} />
        <div>Controls</div>
      </Aux>
    );
  }
}

import React, { Component } from "react";
import Classes from "./original.css";
import PropTypes from "prop-types";

class BurgerIngredients extends Component {
  render() {
    let ingredient = null;

    switch (this.props.type) {
      case "bread-bottom":
        ingredient = <div className={Classes.BreadBottom}></div>;
        break;
      case "bread-top":
        ingredient = (
          <div className={Classes.BreadTop}>
            <div className={Classes.Seeds1}></div>;
            <div className={Classes.Seeds2}></div>;
          </div>
        );
        break;
      case "meat":
        ingredient = <div className={Classes.Meat}></div>;
        break;
      case "salad":
        ingredient = <div className={Classes.Salad}></div>;
        break;
      case "cheese":
        ingredient = <div className={Classes.Cheese}></div>;
        break;
      case "bacon":
        ingredient = <div className={Classes.Bacon}></div>;
        break;
      default:
        ingredient = null;
        break;
    }
    return ingredient;
  }
}

BurgerIngredients.propTypes = {
  type: PropTypes.string.isRequired,
};

export default BurgerIngredients;

import React，{Component}来自“React”；
从“../../hoc/Aux”导入辅助命令；
从“../../components/Burger/Burger”导入汉堡；
类生成器扩展组件{
状态={
成分：{
肉类：1，
沙拉：2，
奶酪：1，
培根：1，
},
};
render（）{
返回(
控制
);
}
}

导出默认生成器

BurgerIngriedent.js

import React, { Component } from "react";
import Aux from "../../hoc/aux";
import Burger from "../../components/Burger/Burger";

class BurgerBuilder extends Component {
  state = {
    ingredients: {
      meat: 1,
      salad: 2,
      cheese: 1,
      bacon: 1,
    },
  };

  render() {
    return (
      <Aux>
        <Burger ingredients={this.state.ingredients} />
        <div>Controls</div>
      </Aux>
    );
  }
}

import React, { Component } from "react";
import Classes from "./original.css";
import PropTypes from "prop-types";

class BurgerIngredients extends Component {
  render() {
    let ingredient = null;

    switch (this.props.type) {
      case "bread-bottom":
        ingredient = <div className={Classes.BreadBottom}></div>;
        break;
      case "bread-top":
        ingredient = (
          <div className={Classes.BreadTop}>
            <div className={Classes.Seeds1}></div>;
            <div className={Classes.Seeds2}></div>;
          </div>
        );
        break;
      case "meat":
        ingredient = <div className={Classes.Meat}></div>;
        break;
      case "salad":
        ingredient = <div className={Classes.Salad}></div>;
        break;
      case "cheese":
        ingredient = <div className={Classes.Cheese}></div>;
        break;
      case "bacon":
        ingredient = <div className={Classes.Bacon}></div>;
        break;
      default:
        ingredient = null;
        break;
    }
    return ingredient;
  }
}

BurgerIngredients.propTypes = {
  type: PropTypes.string.isRequired,
};

export default BurgerIngredients;

import React，{Component}来自“React”；
从“/origing.css”导入类；
从“道具类型”导入道具类型；
类扩展组件{
render（）{
让成分=null；
开关（此.props.type）{
案例“面包底”：
成分=；
打破
案例“面包顶”：
成分=(
;
;
);
打破
案例“肉”：
成分=；
打破
案例“沙拉”：
成分=；
打破
案例“奶酪”：
成分=；
打破
“培根”案：
成分=；
打破
违约：
成分=空；
打破
}
返回成分；
}
}
Burger.propTypes={
类型：PropTypes.string.isRequired，
};
出口原料；

多谢各位

有人能给我解释一下现有的代码吗

让我们从这一部分开始：

Object.keys(props.ingredients)

这用于将对象转换为键数组。因此，它将是一个包含

[“肉”、“沙拉”、“奶酪”、“面包”]

的数组

接下来，它将映射字符串数组，将其转换为不同的数组。决定新阵列中的内容的函数如下：

(igKey) => {
    return [...Array(props.ingredients[igKey])].map((_, i) => {
      return <BurgerIngredient key={igKey + i} type={igKey} />;
    });
  }

props.components[igKey]

将获取与给定键关联的值。因此，如果键是

“肉”

，那么

道具配料[igKey]

就是

。或者，如果键是

'sala'

，则值是

拿着那个号码，他们下一次调用

Array（1）

（例如）。这将创建一个长度正确的数组。然而，有一个问题。由于数组构造函数的工作方式有一个怪癖，如果您尝试在此数组上调用

.map

，它将无法正常工作（您将无法更改值）。为了避免这个问题，下一步他们要做的就是复制数组。这就是

[…]

部分所做的

现在我们有一个数组，它的长度等于对象中的值。最后要做的是调用map并创建一些组件。这就是该代码的作用：

.map((_, i) => {
  return <BurgerIngredient key={igKey + i} type={igKey} />;
});