[英]Identifier expected JSX for loop Eslint error
im new to react and try to build some code in JSX.我是新手,无法做出反应并尝试在 JSX 中构建一些代码。 but when i trying to automate the tags using for loop it give me a Eslint error.
但是当我尝试使用 for 循环自动化标签时,它给我一个 Eslint 错误。
<table className="TableData">
let num= 9;
<thead>
<tr>
<th>Week</th>
for(let i=0; i <num; i++){
return <th> {i+1}</th>;
}
<th>Win</th>
<th>Lose</th>
</tr>
</thead>
A common approach to render some JSX for each item in an array is to use Array.map .为数组中的每个项目渲染一些 JSX 的常用方法是使用Array.map 。
If you only have a number but no array, you can still create an array with new Array(9).fill(null)
如果你只有一个数字而没有数组,你仍然可以用
new Array(9).fill(null)
创建一个数组
export default function App() {
let num = 9;
return (
<div className="App">
<table className="TableData">
<thead>
<tr>
<th>Week</th>
{new Array(num).fill(null).map((_, i) => {
return <th>{i}</th>;
})}
<th>Win</th>
<th>Lose</th>
</tr>
</thead>
</table>
</div>
);
}
First, using return
inside the for loop will exit the for loop.首先,在 for 循环中使用
return
将退出 for 循环。
Check here how to create the array: How to create an array containing 1...N在这里查看如何创建数组: How to create an array containing 1...N
You can try something like this:你可以尝试这样的事情:
const num = 9;
const foo = [];
for (let i = 1; i <= num; i++) {
foo.push(<th>{i+1}</th>);
}
And then insert it inside JSX:然后将其插入 JSX 中:
<th>Week</th>
{foo}
<th>Win</th>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.