反应片段

📌 相关文章

📜 反应片段

📅 最后修改于: 2020-12-19 08:38:18 🧑 作者: Mango

在React中，每当要在屏幕上渲染某些东西时，都需要在组件内部使用render方法。此render方法可以返回单个元素或多个元素。 render方法一次只能渲染其中一个根节点。但是，如果要返回多个元素，则render方法将需要一个' div '标签并将整个内容或元素放入其中。 DOM的这个额外节点有时会导致您的HTML输出格式错误，并且也未被许多开发人员所喜爱。

例

// Rendering with div tag
class App extends React.Component { 
     render() {  
      return ( 
         //Extraneous div element 
         
            Hello World!  
            Welcome to the JavaTpoint.  
          
      ); 
     } 
}

为了解决这个问题，React引入了16.2及更高版本的Fragments。片段使您可以对子列表进行分组，而无需向DOM添加额外的节点。

句法


       child1  
     child2  
      .. ..... .... ...

例

// Rendering with fragments tag
class App extends React.Component { 
    render() { 
     return ( 
       
             Hello World!  
         Welcome to the JavaTpoint.  
         
     ); 
    } 
}

为什么我们使用片段?

使用Fragments标签的主要原因是：

与div标签相比，它使代码的执行速度更快。
它占用更少的内存。

片段短语法

还存在用于为上述方法声明片段的另一种快捷方式。看起来像空标记，在其中我们可以使用'<>'和''而不是' React.Fragment '。

例

//Rendering with short syntax 
class Columns extends React.Component { 
  render() { 
    return ( 
      <>  
         Hello World!  
         Welcome to the JavaTpoint  
       
    ); 
  } 
}

键控片段

速记语法不接受键属性。您需要一个键来将集合映射到片段数组，例如创建描述列表。如果需要提供密钥，则必须使用显式的< React.Fragment >语法声明片段。

注意：键是唯一可以与片段一起传递的属性。

例

Function  = (props) {
  return (
    
      {props.items.data.map(item => (
        // Without the 'key', React will give a key warning
        
          {item.name}
          {item.url}
          {item.description}
        
      ))}
    
  )
}