Question

我事先表示歉意，但我无法理解以下内容。根据文档https://reactjs.org/docs/fragments.html#usage，

...以下代码：

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

应该导致：

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

但是在我的应用程序中它不起作用，下面的代码将两个td标签包装在div组件中：

import React, { Fragment, Component } from 'react';


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

export default App;

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

我要去哪里错了？这些是我在package.json文件中使用的依赖项：

"dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4"
  },

非常感谢。

Answer 1

In example作者将表添加到了组件

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

您只返回没有表和tr的列

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

您应该自己添加表格/ tr，这样就可以了

Answer 2

React.Fragment使您无需包装即可返回多个元素。您的App组件只是呈现：

<td>Hello</td> <td>World</td>

取决于渲染应用程序组件的位置，最终可能会导致无效的DOM嵌套（即，示例中应该有<table/>和<tr/>）。浏览器会尽力处理我们的问题并尝试纠正问题，这可能就是为什么您有额外的div的原因。

React.Fragment将行包装到div中而不是表中

2 个答案: