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

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>
    )

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>
)

返回(
数据检查器结果
属性
资料型态
分类/数字
样本数据
空值
数值范围
料仓尺寸
唯一键
{result}
{result}
)

Result.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>
)

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>)

返回(
{props.attribute}
{props.dataType}
将来要做的事
{props.numericalRange}
{props.binSize}
NA
)

我试图在

Options.js

中呈现多个结果组件。但是，我面临的问题是，我的结果没有正确地显示在表中

这张图片显示了我的问题

道具

不是问题所在，也不是我正在输入的

JSON

。我似乎无法把这张桌子摆好。我做错了什么？提前谢谢你

---

您正在将结果包装到

div中

您应该取消包装并作为

tr

离开

返回(
{props.attribute}
{props.dataType}
将来要做的事
{props.numericalRange}
{props.binSize}
NA
)

使用chrome开发工具，您是否能够共享html树的图像

---

关于

表

元素：直接结构是预期的元素非常重要（

TBODY

，

THEAD

，

TR

，

TD

，

TH

）由于表是非常严格的结构，因此将

DIV

等元素放在DOM需要

TD

的位置，例如将其放在“怪癖”模式下，布局可能会出现错误

您能像这样更新文件并再次检查吗

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>
    )

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>
)

返回(
数据检查器结果
属性
资料型态
分类/数字
样本数据
空值
数值范围
料仓尺寸
唯一键
{result}
{result}
)

Result.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>
)

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>)

返回(
{props.attribute}
{props.dataType}
将来要做的事
{props.numericalRange}
{props.binSize}
NA
)

@Gawel1908不起作用。它仍然反映了同样的问题！嗨@Edorka我试过这么做。它仍然反映了同样的问题！嗨@Edorka！我已经上传了我问题中的链接。这有帮助吗？是的，结果组件上的包装就是导致该问题的原因。现在可以了。你能解释一下为什么包装会导致这个错误吗？当然，请给我一点时间，我已经按照你的编辑了。我仍然面临同样的错误！