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

前端之家收集整理的这篇文章主要介绍了reactjs – 如何在React中的另一个return语句中返回多行JSX?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
单线工作正常
render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

不适用于多行

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

谢谢。

尝试将标签视为函数调用(参见 docs)。然后第一个变成:
{[1,3].map(function (n) {
  return React.DOM.p(...);
})}

第二个:

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

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

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

用JSX糖:

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

你不需要展平结果数组,React会为你做这些。参见下面的小调http://jsfiddle.net/mEB2V/1/.再次:将两个元素包装到一个div / section将很可能是更好的长期。

猜你在找的React相关文章