Как перебирать ячейки и строки таблицы в React, когда мне нужно перебирать несколько массивов данных? - PullRequest
Новая
       8

Как перебирать ячейки и строки таблицы в React, когда мне нужно перебирать несколько массивов данных?

0 голосов
/ 17 декабря 2018

Я пытаюсь реализовать таблицу, но, поскольку мне приходится перебирать несколько массивов для каждой строки, мои элементы не будут отображаться в правильной строке или имеют значение, но высота искажается, так как я не думаю, что реализую таблицудолжным образом.Может ли кто-нибудь помочь, пожалуйста?

<table id="customers">
    <thead>
        <tr>
            <th>Country</th>
            <th>Cities</th>
            <th>Shops</th>
            <th>Map</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> {this.renderCountries()}</td>
            <td> {this.state.renderCities ? this.renderCities() :
                <p>{this.state.defaultCity}</p>} </td>
            <td> {this.state.renderShops ? this.renderShops() :
                <p>{this.state.defaultShopName}</p>} </td>
            <td> {this.state.renderMap ? this.renderMap() : null} </td>
        </tr>
    </tbody>
</table>

в моих методах (renderCountries и т. Д.) Я перебираю определенный массив и возвращаю другой компонент 

   renderCountries = () => {
    return this.state.countries.map((country, index) => {
        return (
            <Column
                key={index}
                data={country}
            />
        )
    })
};

const Column = ({data}) => (<p> {data}</p>);

Пока у меня есть единственный способ, который по крайней мереотображает все элементы в правильной ячейке, однако это портит CSS (вторая строка, все элементы перемещаются примерно на 200 пикселей вниз), я думаю, это потому, что я не реализую таблицу должным образом, но когда я изменяю это на что-то еще,элементы не будут отображаться правильно.Если нужна дополнительная информация, пожалуйста, дайте мне знать.

...