React教程

React Fragments

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

示例

// Rendering with div tag
class App extends React.Component { 
     render() {  
    return ( 
       //Extraneous div element 
       <div>
       <h2> Hello World! </h2> 
       <p> Welcome to the lidihuo. </p> 
       </div> 
    ); 
     } 
}
为解决此问题,React从 16.2 及更高版本引入了 Fragments 。片段使您可以对子列表进行分组,而无需在DOM中添加额外的节点。

语法

<React.Fragment>
      <h2> child1 </h2> 
  <p> child2 </p> 
      .. ..... .... ...
</React.Fragment>

示例

// Rendering with fragments tag
class App extends React.Component { 
    render() { 
   return ( 
     <React.Fragment>
            <h2> Hello World! </h2> 
    <p> Welcome to the lidihuo. </p> 
         </React.Fragment>
   ); 
    } 
} 

为什么使用片段?

使用片段标签的主要原因是:
与div标签相比,它使代码的执行速度更快。 占用更少的内存。

"片段"短语法

对于上述方法,还存在另一种用于声明片段的简写形式。看起来像空标签,在其中可以使用'<>'和''代替' React.Fragment '。

示例

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

键控片段

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

示例

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

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4