在jsx循环中使用Variable

Question

我在jsx渲染中有这样的循环

return(
<View>
{[...Array(10)].map((x, i) => (
<Input
placeholder="Category {i}"
/>
))}
</View>
)

我正试图使用上面的代码动态创建10个输入，在这里我想在占位符中使用变量I，这样我就可以获得占位符类别1、类别2等的输入，但我的应用程序正在崩溃，没有任何错误，在jsx的映射中使用变量的正确方法是什么。

Answer 1

您可以在由模板char包装的字符串中使用javascript变量："'&"；。

并且您需要在儿童中设置key。

return(
<View>
{new Array(10).map((x, i) => (
<Input
key={i}
placeholder={`Category ${i}`}
/>
))}
</View>
)

Answer 2

也许可以试试这个

return (
<View>
{new Array(10).map((x, i) => (
<Input placeholder={`Category ${i + 1}`} />
))}
</View>
);

参考本

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 3

对于任何想知道的人，我通过编写如下代码解决了这个问题。

{[...Array(10)].map((x, i) => {
return (
<Input        
placeholder={"Category " + (i + 1)}
/>
);
})}