javascript - react 渲染数组以添加到列表中 - 简单的返回不起作用

标签 javascript arrays reactjs

我创建了一个简单的对象

const customer = { name : "foo", phone : "519-500-5000", orders : { crust: "normal", toppings :  ["Cheese", "Bacon"]} }

它包含一个名为“orders”的内部对象,该对象也有一个配料数组,在本例中为“Cheese”和“Bacon”。

我已经提取出数组并将其传递给渲染浇头函数

 renderToppings (toppings) {
    console.log("render Toppings: ", toppings) // Renders the whole array of toppings, good.
    toppings.forEach(function (topping) {
        //return (
        //    <li> {topping} </li>
        //)
        console.log("each Topping: ", topping) // This DOES render each topping separately as expected. 
    });
}

我创建了一个包含其他值的列表,然后我最终调用了我的渲染方法(在同一个类中)

{this.renderToppings (PizzaToppings)}

控制台日志确实返回了我期望的值。但是当我取消注释返回时,它不会执行控制台,也不会打印浇头。

我在这里错过了什么?对不起,如果这一切都很草率,我是新来的。

最佳答案

您不会返回任何内容。不使用 forEach() 回调的返回值。

使用map()而不是生成一个元素数组并返回它

return toppings.map(function (topping) {
    return (
        <li> {topping} </li>
    );
});

演示

class Pizza extends React.Component {
  render() {
    var toppings = ['cheese', 'sausage', 'never pineapple'];
    var elements = toppings.map(topping => {
      return ( 
        <li> 
          {topping} 
        </li>
      );
    });

    return ( 
      <ul id = "toppings">
        {elements}
      </ul>
    );
  }
}

ReactDOM.render( 
  <Pizza /> ,
  document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

关于javascript - react 渲染数组以添加到列表中 - 简单的返回不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51314276/

相关文章:

android - Kotlin 中的按钮数组

c++ - 从 C++ 返回二维数组

javascript - react 工具 : Is Babel-CLI needed when I use Browserify with Babelify?

javascript - 我可以从外部组件使用 useReducer

javascript - 任何好的 JavaScript BBCode 解析器?

javascript - 如何使 <li> 仅在滚动时出现在导航栏中

ios - 使用 swift 3 将数组添加到 Realm

javascript - 在 React 中改变 Prop

javascript - 如何在切换时显示不同的 Bootstrap Modal

javascript - 基于原型(prototype)的面向对象。黄金三镖客?