Question

是否有一种反应来返回多个元素而不创建包含子元素的额外元素？所以我可以编写如下函数：

function renderRows(){
return (
   <div className="row">Row1</div>
   <div className="row">Row1</div>
   <div className="row">Row1</div>)
}

Answer 1

您可以像这样使用React.Fragment：

import React, { Fragment } from 'react';

... 

render() { 
  return(
    <Fragment>
      <div></div>
      <div></div>
    </Fragment>
 )
}

Answer 2

您可以为此使用Fragments。

render() {
  return (
    <React.Fragment>
      <div className="row">Row1</div>
      <div className="row">Row1</div>
      <div className="row">Row1</div>
    </React.Fragment>
  );
}

此<></>也有一种简写语法，但并非所有工具都支持。试试吧

render() {
  return (
    <>
      <div className="row">Row1</div>
      <div className="row">Row1</div>
      <div className="row">Row1</div>
    </>
  );
}

查看现场演示here

反应返回多个元素而不创建容器元素

2 个答案: