likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 23

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

作者:Borislav Hadzhiev

正文从这开始~

fragment

使用React fragment从组件中返回多个元素。比如说,<><div>First</div><div>Second</div></> ,当我们需要在不向DOM添加额外节点的情况下,对一个子元素列表进行分组时,就会用到React Fragments。

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

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

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

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

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

import React from 'react';

export default function App() {
  return (
    <React.Fragment>
      <div>First</div>
      <div>Second</div>
    </React.Fragment>
  );
}

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

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

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

import React from 'react';

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

  return arr.map(element => {
    return (
      <React.Fragment key={element}>
        <div>{element}</div>
      </React.Fragment>
    );
  });
}

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

DOM

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

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

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

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

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

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

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