Reagieren Sie auf die innere JSX-Schleife
P粉966979765
P粉966979765 2023-08-23 14:08:12
0
2
535
<p>Ich versuche, in React JSX etwas wie Folgendes zu tun (wobei die ObjectRow eine separate Komponente ist): </p> <pre class="brush:php;toolbar:false;"><tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody></pre> <p>Mir ist klar und verstehe, warum dies kein gültiges JSX ist, da JSX Funktionsaufrufen zugeordnet ist. Da ich jedoch aus der Template-Welt komme und neu bei JSX bin, bin ich mir nicht sicher, wie ich das oben genannte Ziel (mehrmaliges Hinzufügen von Komponenten) erreichen kann. </p>
P粉966979765
P粉966979765

Antworte allen(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 的工作原理。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage