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

原文链接： 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添加额外的节点。


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


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


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


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