如何基于 React 中的 javascript 对象渲染组件 X 次？

IT技术 javascript reactjs
2021-04-30 21:11:41

我正在尝试根据时间的长短渲染 X 数量的照片OBJECT (photos)。我试过只是将数据附加到一个字符串，但它不起作用。有什么好的解决办法吗？

var RenderPhotos = React.createClass({
  getInitialState: function() {
      return {
        photos: this.props.photos
      };
  },
  render: function(){
    var photoHolder = "";
    for(var i=0;i<this.props.photos.length;i++){
      photoHolder += ("<View>
        <Text>" { this.props.photos[0].description } "</Text>
      </View>");
    }

    return (
      { photoHolder }
      // <View>
      //   <Text> { this.props.photos[0].description } </Text>
      // </View>
    )
  }
});
1个回答

2017 年 12 月更新：React v16 现在允许您从render函数返回一个数组。

对于 React 类，您的顶级render函数必须返回单个组件。但是，在您的 JSX 中，您可以插入单个组件或一组组件。

像这样：

render() {
    var photoHolder = [];
    for(var i=0;i<this.props.photos.length;i++){
        photoHolder.push(
            (<View>
                <Text>{ this.props.photos[0].description }</Text>
            </View>)
        );  
    }

    return (
        <View>
            {photoHolder}
        </View>
    )
}

编辑：这是另一个解决方案：

render() {
    return (
        <View>
            {this.props.photos.map((photo, i) => {
                return (
                    <View><Text>{photo.description}</Text></View>
                );
            })}
        </View>
    )
}
其它你可能感兴趣的问题
上一篇在 reactjs 中切换下拉菜单 下一篇服务器上的图像 URL 路径未在普通窗口中呈现，但在隐身模式中是