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

织梦狗教程前端问题

2022-01-01

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

本文介绍了如何在 React 的另一个 return 语句中返回多行 JSX?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

A single line works fine:

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

But not for multiple lines:

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

And the second one:

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

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(...)
  ]);
})}

With JSX syntactic sugar:

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

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 的另一个 return 语句中返回多行 JSX?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react