爲什麼React-JSX中不允許循環？

我試圖理解爲什麼這個代碼片斷是不允許的：爲什麼React-JSX中不允許循環？

<tbody>{ 
for (var i=0; i < objects.length; i++) { 
    <ObjectRow obj={objects[i]} key={i}> 
} }

，爲什麼這個人被允許：

<tbody> 
    {objects.map(function(object, i){ 
     return <ObjectRow obj={object} key={i} />; 
    })} 
</tbody

我沒有得到它... 感謝您的幫助！

來源

2017-08-08 JohannaNoobie

這是因爲JSX期望它內部的任何東西都返回一個要顯示的對象。 for循環不返回任何內容，但是map是。

你可以做一個for循環，如果你有這樣的事情

const getObjects =() => { 
    const objs = [] 
    for (var i=0; i < objects.length; i++) { 
    objs.push(<ObjectRow obj={objects[i]} key={i}>) 
    } 

    return objs; 
} 

<tbody>{getObjects()}

來源

2017-08-08 19:10:14

在JSX，你必須通過表達式（產生值）爲大括號。然而for循環是一個語句（執行一個動作）。

此外，您在for-loop中嘗試過的內容不是有效的JavaScript。

來源

2017-08-08 19:10:47 madox2

for循環不會返回任何值。 for循環只需爲數組中的每個項目執行。

另一方面，map返回React元素的新陣列。

例如：

function giveMeAnArrayPlease() { 
    // Doesn't do anything, just loops through the array 
    var array = ['Hey', 'Hi', 'What's up']; 
    for (var i = 0; i < array.length; i++) { 
    array[i]; 
    } 
}

function giveMeAnArrayPlease() { 
    // Returns a nice uppercase array 
    var array = ['Hey', 'Hi', 'What's up']; 
    return array.map(word => word.toUpperCase()); 
}

地圖回報所有的大寫的詞的新陣列。 React可以接收一組元素並將其轉換爲元素，例如，在示例中，它不能將未定義的元素轉化爲元素。

來源

2017-08-08 19:14:15

正如其他人所指出的，for循環不會返回對象，而.map會。這也意味着你可以使用.filter或者.reduce。

爲了記錄，您可以在JSX之外使用for循環並傳遞您創建的對象。這可以在JSX中使用spread運算符返回之前在React組件類的渲染方法中完成。下面是一個例子：

render() { 
    const objs = [] 
    for (var i=0; i < objects.length; i++) { 
     objs.push(<ObjectRow obj={objects[i]} key={i}>) 
    } 

    return (
     <div> {...objs} </div> 
    ) 
}

來源

2017-08-08 21:19:44 gabrielwr

爲什麼React-JSX中不允許循環？

回答

相關問題