react之Fragments使用方法及使用场景

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

render() {
  return (
    
      
      
      
    
  );
}

还有一种新的短语法可用于声明它们。

动机

一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例：

class Table extends React.Component {
  render() {
    return (
      
        
    );
  }
}

需要返回多个 元素以使渲染的 HTML 有效。如果在 的 render() 中使用了父 div，则生成的 HTML 将无效。

class Columns extends React.Component {
  render() {
    return (
      

        Hello
        World
      
    );
  }
}

得到一个

输出：

Hello

World

Fragments 解决了这个问题。

用法

class Columns extends React.Component {
  render() {
    return (
      
        Hello
        World
      
    );
  }
}

这样可以正确的输出

：

Hello

World

短语法

你可以使用一种新的，且更简短的语法来声明 Fragments。它看起来像空标签：

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

你可以像使用任何其他元素一样使用 <> ，除了它不支持 key 或属性。

带 key 的 Fragments

使用显式 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：

function Glossary(props) {
  return (
    

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

key 是唯一可以传递给 Fragment 的属性。未来我们可能会添加对其他属性的支持，例如事件。

---

经典前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

qrcode_for_gh_8.jpg