我创建了一个简单的对象
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/