在 jsx 循环中使用变量

Question

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

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

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

Answer 1

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

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

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

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

并且您需要在children中设置key。

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

在 jsx 循环中使用变量

Using Variable inside jsx loop

arrays

reactjs

react-native

jsx