Как отображать массивы в столбце JSX, а НЕ в строке - PullRequest
Новая
       54

Как отображать массивы в столбце JSX, а НЕ в строке

0 голосов
/ 30 апреля 2020

Я работаю над приложением реагирования. Я получаю данные в массивах от серверной части. Например, я получаю массив названий, другой массив цен и т. Д. c ... У меня есть четыре массива. Я устанавливаю эти массивы в состояние, а затем хочу отобразить их на веб-странице в таблице. Проблема в том, что тег помещает любые данные в ряд. Я хочу отобразить каждый массив в отдельном столбце. Однако после сопоставления массива единственная возможность, которую я смог обнаружить, - поместить их в строку таблицы. Вот мое текущее решение: 

 <table>
                <tbody className="column">
                    <tr>
                        <th>Title</th>
                    </tr>
                    {this.state.cartTitles.map((item => 
                        <tr><td key={item}>{item}</td></tr>    
                    ))}
                    </tbody>
                    <tbody className="column1">
                        <th>Price</th>
                    {this.state.cartPrice.map((item =>
                       <tr><td key={item}>{item}</td></tr>
                    ))}
                    </tbody>
                    <tbody className="column2">
                         <th>Quantity</th>
                    {this.state.cartQuantity.map((item =>
                       <tr><td key={item}>{item}</td></tr>
                    ))}
                    </tbody>
                    <tbody className="column3"> 
                            <th>Total</th>
                    {this.state.cartTotal.map((item =>
                       <tr><td key={item}>${item}</td></tr>
                    ))}
                    </tbody> 
                </table>

Я использовал css, чтобы организовать очень грязный стол. Тем не менее, каждый столбец в основном похож на свою собственную таблицу с одним столбцом, просто все придерживаются друг за другом. Есть ли альтернативное решение? В идеале мне бы понравился тег столбца таблицы; Я совершенно уверен, что этого не существует, но это то решение, которое я ищу. В итоге: я хочу отобразить четыре массива в таблице, каждый массив в своем собственном столбце. Я застрял из-за необходимости отображения каждого массива в отдельности. По сути, я хочу, чтобы все первые элементы каждого массива отображались в одной строке, то же самое для второго элемента, и т. Д. c ... Любые идеи обязательно будут оценены !!!

Ответы [ 3 ]

0 голосов
/ 30 апреля 2020

Я внес некоторые изменения в ваш код. Теперь он отображает все массивы в отдельные столбцы, чтобы создать таблицу. Вот код: 

 <table>
      <tr>
        <th>
          <tr>
            <th>Title</th>
          </tr>
          {this.state.cartTitles.map((item) => (
            <tr>
              <td key={item}>{item}</td>
            </tr>
          ))}
        </th>
        <th>
          <th>Price</th>
          {this.state.cartPrices.map((item) => (
            <tr>
              <td key={item}>{item}</td>
            </tr>
          ))}
        </th>
        <th>
          <th>Quantity</th>
          {this.state.cartQuantity.map((item) => (
            <tr>
              <td key={item}>{item}</td>
            </tr>
          ))}
        </th>
        <th >
          <th>Total</th>
          {this.state.cartTotal.map((item) => (
            <tr>
              <td key={item}>${item}</td>
            </tr>
          ))}
        </th>
      </tr>
    </table>
0 голосов
/ 30 апреля 2020

Предполагая, что все массивы имеют одинаковое количество элементов, вы можете выстроить их в линию, используя индекс выбранного вами «основного» массива (например, cartTitles): 

<table>
    <thead>
        <tr>
            <td>Title</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Total</td>
        </tr>
    <thead>
    <tbody>
        {this.state.cartTitles.map( (title, index) => {
            return (
                <tr key={title}>
                    <td>{title}</td>
                    <td>{this.state.cartPrice[index]}</td>
                    <td>{this.state.cartQuantity[index]}</td>
                    <td>{this.state.cartTotal[index]}</td>
                </tr>
            )
        })}
    </tbody>
</table>
0 голосов
/ 30 апреля 2020

Я бы попытался сохранить данные другим способом. Я предположил, что вы говорите о корзине продуктов ... Создайте класс Cart с price, title, quantity и total, как только ваши данные будут храниться таким образом в вашем штате, отображать каждую корзину в отдельном ряду. 

const renderCartRow = () => {
  return this.state.carts.map(cart => {
    return (
      <tr key={cart.title}>
        <td>{cart.title}</td>
        <td>{cart.price}</td>
        <td>{cart.quantity}</td>
        <td>{cart.total}</td>
      </tr>
    )
  })
}
...