Возникла проблема с отображением таблицы в компоненте React. - PullRequest
Новая
       10

Возникла проблема с отображением таблицы в компоненте React.

0 голосов
/ 30 сентября 2019

Я пытаюсь отобразить таблицу внутри реагирующего компонента, но у меня возникают проблемы с выравниванием строк по заголовку 

render() {
         console.log("Top Searches",this.props.topSearches)
         return(
          <div className="topsearches">
          <table border="2" align="center">
          <th> Search Term </th>
          <th>Count </th>
             {this.props.topSearches.map((top_search, index) => (
                  <tr>
                    {Object.keys(top_search).map(function(key) {
                      return <div>      
                      <tbody>
                      <td align="center">{key} </td>
                      <td align="right">{top_search[key]}</td>
                      </tbody>
                       </div>

                      })}


                </tr>
            ))}
            </table>
          </div>

      )
    }

Это - это вывод, который я получаю

1 Ответ

1 голос
/ 30 сентября 2019

enter image description here

Полагаю, вы пытаетесь достичь чего-то подобного.

Я редактировал это в codesandbox здесь . https://codesandbox.io/s/sparkling-sound-yd1ih

return (
    <div className="topsearches">
      <table border="2" align="center">
        <thead>
          <th> Search Term </th>
          <th>Count </th>
        </thead>
        <tbody>
          {props.topSearches.map((top_search, index) =>
            Object.keys(top_search).map((key, index) => {
              return (
                <tr>
                  <td>{key}</td>
                  <td>{top_search[key]}</td>
                </tr>
              );
            })
          )}
        </tbody>
      </table>
    </div>
  );

Модификация, которую я сделал для достижения этой цели:

  • Добавлено <thead>
  • Исправлено <tbody> Петля

Пожалуйста, дайте мне знать, если у вас есть дополнительные вопросы!

...