React浅析Fragments如何使用方法

概述 可以将子列表分组,而无需向DOM添加额外节点简单理解:空标签 或 rende

概述

  • 可以将子列表分组,而无需向DOM添加额外节点
  • 简单理解:空标签
  • <React.Fragment></React.Fragment> 或 <></>
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  )
}

动机

  • 以下面的代码为例,如果Columns组件返回多个td元素才能实现效果,但是如果我们在Columns组件中使用了div父元素,则会使td元素失效。Fragment则可以解决这个问题。
//table.js
const Table = () => {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    )
  }
}
//columns.js
const Columns = () => {
 render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    )
  }
}
//以上代码输出:
<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>
//此时 td 是失效的,可以使用Fragemengt解决这个问题
//用法:
//columns.js
const Columns = () => {
 render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    )
  }
}
//通过上面的方法我们就可以正确的输出table啦:
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

短语法

  • 可以使用一种新的,且更简短的类似空标签的语法来声明 Fragments
  • <> </>
  • 不支持 key 或属性
const Cloumns = () => {
render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    )
  }
}

带key 的Fragments

  • 使用显式 <React.Fragment> 语法声明的片段可能具有 key
  • key 是唯一可以传递给 Fragment 的属性
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`,React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  )
}

到此这篇关于React浅析Fragments使用方法的文章就介绍到这了,更多相关React Fragments内容请搜索好代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好代码网!

您可能有感兴趣的文章
React渲染机制超详细讲解

react后台系统最佳实践示例详解

react中的双向绑定你真的了解吗

React组件的应用介绍

React组件通信如何实现方式详解