单线工作正常
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)。然后第一个变成：
原文链接：https://www.f2er.com/react/302985.html{[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将很可能是更好的长期。
