如何在React的另一个return语句中返回多行JSX？

Question

单线工作正常

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

不是多行

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return (
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      )
    }}
  );
}

谢谢.

Answer 1

尝试将标记视为函数调用(请参阅docs).然后第一个成为:

{[1,2,3].map(function (n) {
  return React.DOM.p(...);
})}

第二个:

{[1,2,3].map(function (n) {
  return (
    React.DOM.h3(...)
    React.DOM.p(...)
  )
})}

现在应该很清楚,第二个片段实际上没有意义(你不能在JS中返回多个值).你必须将它包装在另一个元素中(很可能是你想要的,这样你也可以提供一个有效的key属性),或者你可以使用这样的东西:

{[1,2,3].map(function (n) {
  return ([
    React.DOM.h3(...),
    React.DOM.p(...)
  ]);
})}

使用JSX糖:

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

你不需要压扁生成的数组,React会为你做这件事.请参阅以下小提琴http://jsfiddle.net/mEB2V/1/.再次:将两个元素包装成div/section将很可能是长期更好的.

Answer 2

似乎关于返回数组的旧答案不再适用(可能因为React~0.9,正如@ dogmatic69在评论中写的那样).

文档说你需要返回一个节点:

JSX根节点的最大数量

目前,在组件的渲染中,您只能返回一个节点; 如果你有一个要返回的div列表,你必须将你的组件包装在div,span或任何其他组件中.

不要忘记JSX编译成常规JS; 返回两个函数并不能真正理解语法.同样,不要将一个以上的孩子放在三元组中.

在许多情况下,你可以简单地用a <div>或a 包装东西<span>.

在我的情况下,我想返回多个<tr>s.我将它们包裹在一个<tbody>表中,允许有多个实体.

编辑:从React 16.0开始,显然再次允许返回一个数组,只要每个元素都有一个key:https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html #新的渲染回报类型片段和串

编辑:React 16.2允许你围绕一个元素列表,如果你喜欢这个元素,<Fragment>…</Fragment>甚至<>…</>,如果你喜欢这个元素:https://blog.jmes.tech/react-fragment-and-semantic-html/

Answer 3

从React v16.0.0开始,可以通过将多个元素包装在一个中来返回多个元素Array

render() {
  return (
    {[1,2,3].map(function (n) {
      return [
        <h3>Item {n}</h3>.
        <p>Description {n}</p>
      ]
    }}
  );
}

同样来自React v16.2.0,React Fragments引入了一个名为的新功能,您可以使用它来包装多个元素

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

根据文件:

React中的一个常见模式是组件返回多个元素.片段允许您将子列表分组,而无需向DOM添加额外节点.

使用显式语法声明的片段可能具有键.一个用例是将一个集合映射到一个片段数组 - 例如,创建一个描述列表:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key是唯一可以传递给Fragment的属性.将来,我们可能会添加对其他属性的支持,例如事件处理程序.

Answer 4

此外,您可能希望在React组件内的某个辅助函数中返回多个列表项.只需返回一个带有key属性的html节点数组:

import React, { Component } from 'react'

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}

Answer 5

更新

使用反应片段。这很简单。链接到片段文档。

render() {
  return (
    <>
    {[1,2,3].map((value) => <div>{value}</div>)}
    </>
  );
}

旧答案 - 已过时

当 React > 16 时，你可以使用react-composite。

import { Composite } from 'react-composite';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

当然，必须安装react-composite。

npm install react-composite --save