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

【问题标题】：Iterate over array inside map function in react-native在react-native中迭代map函数内的数组
【发布时间】：2017-09-08 07:20:45
【问题描述】：

我有一个函数：

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 循环？

【问题讨论】：

是的，这将是正确的方法，使用另一个地图并创建 ui 元素:)

标签： javascript reactjs react-native

【解决方案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
}

【讨论】：

【解决方案2】：

有没有办法在地图函数中做到这一点？

是的，这将是动态创建 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}>
                { 
                    convObj.actionButtons.map((el, j) => {

                        return /*Code*/

                    }) 
                }
            </Text>
        </View>                            
    })
    return conversationContent
}

我需要使用旧的 for 循环吗？

你也可以使用它，但使用 map 会很容易，因为我们不能直接在 JSX 中使用 for 循环，所以你需要创建另一个函数并将所有 for 循环逻辑放入其中并从 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
}

【讨论】：