React JSX 內部循環
P粉966979765
P粉966979765 2023-08-23 14:08:12
0
2
525
<p>我正在嘗試在 React JSX 中執行類似以下操作(其中 ObjectRow 是一個單獨的元件):</p> <pre class="brush:php;toolbar:false;"><tbody> for (var i=0; i < numrows; i ) { <ObjectRow/> } </tbody></pre> <p>我意識到並理解為什麼這不是有效的 JSX,因為 JSX 映射到函數呼叫。然而,由於來自模板領域並且是 JSX 新手,我不確定如何實現上述目標(多次添加元件)。 </p>
P粉966979765
P粉966979765

全部回覆(2)
P粉609866533

我不確定這是否適合您的情況,但通常地圖是一個很好的答案。

如果這是您使用 for 迴圈的程式碼:

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

你可以用 map 這樣寫一>:

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

ES6 語法:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
P粉937769356

將其想像為您只是呼叫 JavaScript 函數。您不能使用 for 迴圈來傳遞函數呼叫的參數:

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

查看函數 tbody 如何作為參數傳遞給 for 迴圈 - 導致語法錯誤。

但是您可以建立一個數組,然後將其作為參數傳遞:

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

使用 JSX 時,您基本上可以使用相同的結構:

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

順便說一句,我的 JavaScript 範例幾乎與 JSX 範例所轉換的內容完全相同。試著使用 Babel REPL 來感受 JSX 的工作原理。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板