无法在 React 中正确呈现结果表

Question

Options.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

您可以像这样更新您的文件并再次检查吗

Options.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、TD、TH）非常重要，因为表格是非常严格的结构和放置元素例如DIV，其中DOM 需要TD，例如将其置于“怪癖”模式，布局可能会出现异常。 https://css-tricks.com/using-divs-inside-tables/