React浅析Fragments使用方法

目录

• 概述
• 动机
• 短语法
• 带key 的Fragments

概述

• 可以将子列表分组，而无需向DOM添加额外节点
• 简单理解：空标签
• 或 <>

render() {
  return (
    
      
      
      
    
  )
}

动机

• 以下面的代码为例，如果Columns组件返回多个td元素才能实现效果，但是如果我们在Columns组件中使用了div父元素，则会使td元素失效。Fragment则可以解决这个问题。

//table.js
const Table = () => {
  render() {
    return (
      
        
    )
  }
}
//columns.js
const Columns = () => {
 render() {
    return (
      

        Hello
        World
      
    )
  }
}
//以上代码输出：

      

  

    
Hello
      
World
    
  

//此时 td 是失效的，可以使用Fragemengt解决这个问题
//用法：
//columns.js
const Columns = () => {
 render() {
    return (
      
        Hello
        World
      
    )
  }
}
//通过上面的方法我们就可以正确的输出table啦：

  

    
Hello
    
World
  

短语法

• 可以使用一种新的，且更简短的类似空标签的语法来声明 Fragments
• <>
• 不支持 key 或属性

const Cloumns = () => {
render() {
    return (
      <>
        Hello
        World
      
    )
  }
}

带key 的Fragments

• 使用显式 语法声明的片段可能具有 key
• key 是唯一可以传递给 Fragment 的属性

function Glossary(props) {
  return (
    

      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        
          
{item.term}
          
{item.description}
        
      ))}
    
  )
}

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