代码之家 › 专栏 › 技术社区 › Gracie williams

在jsx循环中使用变量

jsx react-native reactjs arrays

Gracie williams · 技术社区 · 3 年前

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

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

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

3 回复 | 直到 3 年前

Liki Crus 3 年前

您可以在由模板char“.”包装的字符串中使用javascript变量。

你需要设定 key 在儿童中。

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

BARNOWL 3 年前

也许试试这个

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

Gracie williams 3 年前

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

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