时间戳

首页 > 解决方案 > 使用 array.map() 创建组件时如何动态分配 Prop 值

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

问题描述

我正在努力使我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={() => {}}
   /> 
 )}

标签： arraysreactjsreact-nativecomponents

解决方案

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

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

推荐阅读