Question

我有一个功能：

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
      return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
        <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
        <Text style= {globalStyle.conversationText}>{ convObj.actionButtons }</Text>
      </View>                            
    })
    return conversationContent
  }

我正在使用此函数渲染组件，具体取决于状态变量。我面临的一个挑战是convObj.actionButtons这里是一个数组。我想在map函数内迭代它来构建组件。有没有办法在map函数中执行此操作，或者我是否需要使用旧的for循环？

Answer 1

你可以使用第二张地图，但这可能会变得混乱。

如何使用单独的函数返回第二个映射数组：

renderActionButtons(actionButtons) {
  return actionButtons.map(button => {
    // Return code here
  }
}

...然后像这样使用：

renderConversations() {
  let conversationContent = this.state.conversationArray.map((convObj, i) => {
    return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
      <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
      <Text style= {globalStyle.conversationText}>{ this.renderActionButtons(convObj.actionButtons) }</Text>
    </View>                            
  })
  return conversationContent
}

Answer 2

有没有办法在map函数中执行此操作？

是的，这将是动态创建ui元素的正确方法。再次使用map并创建元素。

检查此示例：

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
        return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
            <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
            <Text style= {globalStyle.conversationText}>
                { 
                    this._fun(convObj.actionButtons)
                }
            </Text>
        </View>                            
    })
    return conversationContent
}


_fun(item){
    //for loop here and return the elements
}

我是否需要使用旧的for循环？

你也可以使用它，但是使用map会很容易，因为直接我们不能在JSX中使用for循环，所以你需要创建另一个函数并将所有for循环逻辑放在其中并从map中调用该函数。

像这样：

rvm use 2.1.2

在react-native中迭代map函数内的数组

2 个答案: