如何在 React 的另一个返回语句中返回多行 JSX? [英] How can I return multiple lines JSX in another return statement in React?

问题描述

一行工作正常:

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

推荐答案

尝试将标签视为函数调用(参见 文档).然后第一个变成:

Try to think of the tags as function calls (see the documentation). Then the first one becomes:

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

第二个:

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

现在应该清楚第二个代码段没有意义(在 JavaScript 中不能返回多个值).您必须将其包装在另一个元素中(很可能是您想要的，这样您还可以提供有效的 key 属性)，或者您可以使用以下内容:

It should now be clear that the second snippet doesn't really make sense (you can't return more than one value in JavaScript). You have to either wrap it in another element (most likely what you'd want, that way you can also provide a valid key property), or you can use something like this:

{[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 中很可能从长远来看会更好.

You don't need to flatten the resulting array. React will do that for you. See the following fiddle http://jsfiddle.net/mEB2V/1/. Again: Wrapping the two elements into a div/section will most likely be better long term.

这篇关于如何在 React 的另一个返回语句中返回多行 JSX?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！