Question

我有一个这样的艺术家列表：

artistsList = [
    { "id": 1, "name": "Kate", "headings": [ 'heading1', 'heading2' ] },
    { "id": 2, "name": "Alice", "headings": [ ] },
    { "id": 3, "name": "Mat", "headings": [ 'heading1' ] },
    .....
];

默认情况下，我还有一个这样的对象：

columns: {
    columnsList: [
        { 'id': 1, 'title': '---', 'artistsIds': [ ] }
    ],
    columnOrder: [ 1 ]
}

我需要将艺术家放入专栏。
我将Artists数组中的所有ID添加到column对象的artistIds中。之后，我需要展示艺术家。

例如，列的高度最多可以为500px。但是，此艺术家列表中的所有列表都比500px高。这意味着我需要创建下一列并将剩余的项目放入其中。我需要在他们之间分配艺术家。

列数是动态的，并且艺术家项目可以具有不同的高度。因此，我需要知道如何根据项目的高度控制列的填充，因为高度（以我的立场）在组件末尾的returnig之后可用。

这是我的尝试：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import artists from 'artistsTest.js';
import './ArtistsTest.css';

class Artists extends Component {
    constructor() {
        super();
        this.state = {
            artists
        };
    }
    render() {
         return this.state.artists.columns.columnOrder.map((columnId) => {
        const column = this.state.artists.columns.columnsList[columnId - 1];
        const artists = column.artistsIds.map((artistId) => 
            this.state.artists.artistsList[artistId-1]);

        return <div className='column' ref={this.blockHeight} key={column.id}>
                    {artists.map((artist, index) => 
                        <div key={index} className='item'>
                            <div>
                                {artist.name}
                            </div>
                        </div>
                    )}
               </div>
        })
    }

}

取决于填充量的动力柱

0 个答案: