React技巧之组件中返回多个元素

发布时间:2024-01-15 19:00

原文链接:https://bobbyhadz.com/blog/react-return-multiple-elements

作者:Borislav Hadzhiev

正文从这开始~

fragment

使用React fragment从组件中返回多个元素。比如说,<>

First
Second
,当我们需要在不向DOM添加额外节点的情况下,对一个子元素列表进行分组时,就会用到React Fragments。

export default function App() {
  return (
    <>
      
First
Second
); }

我们使用了一个Reactfragment来分组一个子元素的列表,而没有向DOM添加额外的节点。

React技巧之组件中返回多个元素_第1张图片

该截图显示,我们的相邻div元素已经被添加到DOM中,而没有被包裹在一个额外的DOM节点中。

你也可能会看到更多的fragments 语法。

import React from 'react';

export default function App() {
  return (
    
      
First
Second
); }

上面的两个示例会取得相同的结果。他们都对一个子元素的列表进行分组,而没有向DOM添加额外的节点。

现在大多数代码编辑器都支持更简明的语法,所以更常用。

然而需要注意的是,如果你必须要给fragment传递key属性,你就必须使用更为详细的语法。

import React from 'react';

export default function App() {
  const arr = ['First', 'Second'];

  return arr.map(element => {
    return (
      
        
{element}
); }); }

如果你使用了简写fragment语法<> ,你将无法给fragment传递任何属性。

DOM

另一种解决方案是将子元素包裹在另一个DOM元素中,例如div
export default function App() {
  return (
    
First
Second
); }

这样就会解决无法传递属性的问题。因为我们没有返回多个元素,而是返回一个包含多个子元素的div元素。

在React组件中,我们必须只返回单个元素。因为从函数中返回多个值是无效语法。

React组件只是函数,所以当我们在同一级别返回多个元素时,我们实际上是在函数的同一级别使用多个return语句。

function render() {
  return React.createElement('div', null, 'First');
  return React.createElement('div', null, 'Second');
}

第二个return语句是不可达的,并且属于无效语法。

另一方面,当我们使用fragment或者其他元素来包裹元素时,该函数只返回一个带有多个子元素的单一值,这样便解决了错误。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号