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

发布时间：2020-12-15 06:51:26 所属栏目：百科来源：网络整理

导读：单线工作正常 render: function () { return ( {[1,2,3].map(function (n) { return p{n}/p }} );} 不适用于多行 render: function () { return ( {[1,3].map(function (n) { return ( h3Item {n}/h3 pDescription {n}/p ) }} );} 谢谢。尝试将标签视为函数

单线工作正常

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将很可能是更好的长期。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!