Невозможно правильно отобразить таблицу результатов в React

Question

Параметры. js

    return (
      <div>
        <Table bordered hover variant="light">
          <caption>Data Inspector Results</caption>
          <thead className="thead-dark">
            <tr>
              <th>Attribute</th>
              <th>Datatype</th>
              <th>Categorical/Numerical</th>
              <th>Sample Data</th>
              <th>Null Values</th>
              <th>Numerical Range</th>
              <th>Bin Size</th>
              <th>Unique Key</th>
            </tr>
          </thead>
          <tbody>
            {result}
            {result}
          </tbody>
        </Table>
      </div>
    )

Результат. js

return (
    <div>
        <tr>
          <td>{props.attribute}</td>
          <td>{props.dataType}</td>
          <td>
            <Select options={categoryOptions} />
          </td>
          <td>To Be Done In The Future</td>
          <td>
            <Select
              defaultValue={[]}
              isMulti
              name="colors"
              options={nullBinOptions}
              className="basic-multi-select"
              classNamePrefix="select"
            />
          </td>
          <td>{props.numericalRange}</td>
          <td>{props.binSize}</td>
          <td>NA</td>
        </tr>
    </div>
)

Я пытаюсь отобразить несколько компонентов результата в пределах Options.js. Однако я сталкиваюсь с этой проблемой, когда мои результаты не отображаются должным образом в таблице.

Это изображение показывает мои проблемы

props не является проблемой или JSON, что я Я не могу сделать эту таблицу красиво. Что я делаю неправильно? Заранее спасибо!

Answer 1

Можете ли вы просто обновить свои файлы, как это, и проверить еще раз

Параметры. js

return (
    <Table bordered hover variant="light">
      <caption>Data Inspector Results</caption>
      <thead className="thead-dark">
        <tr>
          <th>Attribute</th>
          <th>Datatype</th>
          <th>Categorical/Numerical</th>
          <th>Sample Data</th>
          <th>Null Values</th>
          <th>Numerical Range</th>
          <th>Bin Size</th>
          <th>Unique Key</th>
        </tr>
      </thead>
        {result}
        {result}
    </Table>
)

Результат. js

return (
<tbody>
    <tr>
      <td>{props.attribute}</td>
      <td>{props.dataType}</td>
      <td>
        <Select options={categoryOptions} />
      </td>
      <td>To Be Done In The Future</td>
      <td>
        <Select
          defaultValue={[]}
          isMulti
          name="colors"
          options={nullBinOptions}
          className="basic-multi-select"
          classNamePrefix="select"
        />
      </td>
      <td>{props.numericalRange}</td>
      <td>{props.binSize}</td>
      <td>NA</td>
    </tr>
</tbody>)

Answer 2

Вы оборачиваете результат в div, вы должны распаковать его и оставить как tr.

return (
        <tr>
          <td>{props.attribute}</td>
          <td>{props.dataType}</td>
          <td>
            <Select options={categoryOptions} />
          </td>
          <td>To Be Done In The Future</td>
          <td>
            <Select
              defaultValue={[]}
              isMulti
              name="colors"
              options={nullBinOptions}
              className="basic-multi-select"
              classNamePrefix="select"
            />
          </td>
          <td>{props.numericalRange}</td>
          <td>{props.binSize}</td>
          <td>NA</td>
        </tr>
)

Используя chrome -dev-tools вы можете поделиться изображением html дерева?

О TABLE элементах: очень важно, чтобы непосредственная структура была ожидаемыми элементами (TBODY, THEAD, TR, TD, TH ), поскольку таблицы представляют собой очень жесткие структуры и помещают такие элементы, как DIV, где DOM ожидает TD, например, переводит его в режим «quirk», и компоновка будет, вероятно, работать неправильно. https://css-tricks.com/using-divs-inside-tables/