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

小编典典

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

reactjs

单行工作正常

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>
      )
    }}
  );
}

谢谢。

阅读 578

2020-07-22

共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中将很可能会更好。

2020-07-22