📒REACT笔记👉👉👉Fragment

我们经常会在组件的render方法里返回多个元素,但由于React不允许返回多个元素,所以我们必须使用一个元素包裹一下之后返回:

1
2
3
4
5
6
7
8
9
const Component = () => {
  return (
    <div classname='wrapper'>
      <Child1 />
      <Child2 />
      <Child3 />
    </div>
  )
}

FRAGMENT的作用是无需使用上面的.wrapper元素,而是换成React.Fragment:

1
2
3
4
5
6
7
8
9
const Component = () => {
  return (
    <React.Fragment>
      <Child1 />
      <Child2 />
      <Child3 />
    </React.Fragment>
  )
}

React.Fragment并不会在页面生成DOM。问题来了,就算外层包裹了一个DOM元素,在页面中最终生成了一个DOM元素有什么影响吗?可以看下面的场景:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

const Columns = () => {
  return (
    <div>
      <td>1</td>
      <td>2</td>
    </div>
  )
}

最终的渲染结果就变成了如下代码,tr元素包裹了一个div元素????

1
2
3
4
5
6
7
8
9
<table>
  <tr>
    <div>
      <td>1</td>
      <td>2</td>
    </div>
  </tr>
</table>

我们通过使用React.Fragment改造Column组件:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const Columns = () => {
  return (
    <React.Fragment>
      <td>1</td>
      <td>2</td>
    </React.Fragment>
  )
}

那个tr元素里讨厌的div终于不存在了!!!顺便说,React.Fragment还有一种短语法👉 <> </>。最后要强调的一点是React.Fragment只能接受key这一个属性,其他属性都不会起作用。

拜拜👋

updatedupdated2020-07-062020-07-06