使用 array.map() 创建组件时如何动态分配 Prop 值

Posted 2023-02-23

【中文标题】使用 array.map() 创建组件时如何动态分配 Prop 值

【英文标题】：How to dynamically assign Prop values when creating component with an array.map()

【发布时间】：2019-07-10 03:38:46

【问题描述】：

我正在努力使我的React-Native 更具动态性，并通过映射数组来构建组件。我坚持尝试动态分配道具值，因为它们已经在括号内。

有没有办法完成下面的这个例子？我可以以某种方式转义参数或将我需要的值用双括号括起来吗？

// Sample array
fieldArray = [
  "DefaultValue": "ABCDEF",
   "Name": "Field1",
  "DefaultValue": "123456",
   "Name": "Field2"
]

// Old way having static defined components
<TextInput
  value=this.state.Field1
  onChangeText=() => 
 />
 <TextInput
  value=this.state.Field2
  onChangeText=() => 
 />

我想做的是：

 fieldArray.map((x) => 
   <TextInput
    value=this.state.x.Name     // <-- This is where I am stuck, can I double bracket in a .map()??
    onChangeText=() => 
   /> 
 )

【参考方案1】：

在 ES 6 中，您可以像这样指定文字：

fieldArray.map((x) => 
  <TextInput
value=this.state[x.Name]     // <-- This is how you do it
in a .map()??
onChangeText=() => 
 /> 
)

【讨论】：

我正在使用 ES6，但这似乎给了我这个错误：Unexpected token (61:28) 就在第一个方括号 > 61 | value=this.state.[x.Name] 我错过了什么吗？

【参考方案2】：

你需要注意的两件事

您访问状态键的方式不正确。 React state 基本上是一个对象，因此要访问此类键，您可以使用 this.state[keyName] 而不是点表示法

您还需要为 TextInput 元素设置唯一键，因为它是循环渲染的，否则您将始终得到一个 TextInput 渲染最后一个，即 Field2。由于您没有数组中每个对象的唯一 ID，我建议您使用索引作为键

 fieldArray.map((x, index) => 
     <TextInput
          key="Key-"+index
          value=this.state[x.Name] 
           onChangeText=() => 
     /> 
  )