Reactjs 片段将行包装到div而不是表中

我事先道歉，但我无法理解以下内容。据文件说,

…以下代码：

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

非常感谢。

作者将表添加到组件中

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

类表扩展了React.Component{
render（）{
返回(
);
}
}

并且只返回不带table和tr的列

class App extends Component {
  render() {
    return (      
      <Columns/>    
    );
  }
}

类应用程序扩展组件{
render（）{
报税表（
);
}
}

---

您应该自己添加table/tr，它将起作用。Fragment允许您返回多个元素，而无需包装它们。您的应用程序组件只是呈现：

你好 世界

---

根据呈现应用程序组件的位置，可能会导致无效的DOM嵌套（即，在示例中，您应该有

和

）。浏览器能最好地处理我们的问题，并试图纠正问题，这可能就是为什么您有额外的div。

您如何呈现

应用程序
组件？您确定看到的
div
不仅仅是容器根吗？@Tholle是的，它是容器根。我误解了整个碎片概念。见下文。
"dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4"
  },

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

class App extends Component {
  render() {
    return (      
      <Columns/>    
    );
  }
}