Question

我试图将一组对象（照片细节）映射到一个组件中，以便将它们按行排列，每行中有三（3）个组件（三幅图像）。

我尝试创建一个嵌套的for循环，以使组件像我描述的那样打印出来，但无济于事。我对React Native还是很陌生，但是使用其他语言（C，Java，Javascript）进行编程已有多年了。

到目前为止，这是我的代码：

class PhotoList extends Component {
    render() {
        var payments = [];

        for(let j = 0; j < PHOTO_DATA.length; J++){
            payments.push(
                <View>
            )
            for(let i = 0; i < 3 || j < PHOTO_DATA.length; i++){
                j = j + 1;
                payments.push(
                    <Photo key={i} {...PHOTO_DATA.pop} press={this.props.press} />
                )
            }
            payments.push(
                </View>
            )
        }

        return (
            <View style={photoList.container}>
                <ScrollView>
                    { payments }
                    {/* {PHOTO_DATA.map((item, i) => {
                        return <Photo key={i} {...item} press={this.props.press} />
                    })} */}
                </ScrollView>
            </View>
        )
    }
}

非常感谢您的帮助！

Answer 1

这里的问题是您对待JSX的方式是错误的。不能将JSX标记作为纯文本发出（就像使用PHP发出HTML一样）。在您构建项目时，此<View a={1} b={2} />会编译到此React.createElement('View', { a:1, b: 2})中，因此您的代码不是有效的JSX

您应该为此.map使用PHOTO_DATA.map(item => <Photo key={i} /* your other props */ />，这将为您提供渲染的照片组件

这里的另一个问题是，您还希望出于样式考虑将项目按3组划分。您应该为此使用样式，例如创建一个父项View，将所有渲染的<Photo />放入其中，并使用flexbox相应地设置元素的样式（例如，请参见this answer来做到这一点）

但是，如果您仍然想知道如何使用JSX而不是样式进行操作，则必须首先进行split array in chunks of 3（在这里您将得到每个数组包含3个项目的数组），然后使用.map渲染带有照片的视图，例如

return (
    {chunkedArray.map(group =>
      <View>
        {group.map(photo => <Photo />)}
      </View>
    )}
  )

有没有一种方法可以使用for循环映射对象数组？

1 个答案: