React渲染数组添加到列表 - 简单返回不起作用

Question

我创建了一个简单的对象

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. 
    });
}

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

{this.renderToppings (PizzaToppings)}

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

我在这里错过了什么？对不起,如果这一切都很草率,我是新的反应.

Answer 1

你没有回到任何东西.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>