javascript - 如何将子节点与 JSX 结合起来？

Question

我想从 li 元素建立一个 ul 列表，但是 li 元素将来自不同的来源，所以我不能在一个语句中做到这一点。JSX 似乎无法处理一组子元素，这给了我一个语法错误：

var items = <li>S</li>
  <li>S</li>
  <li>S</li>;

理想情况下，我想做类似的事情：

var items1 = <li>S</li>
  <li>S</li>
  <li>S</li>;
var items2 = <li>S</li>
  <li>S</li>
  <li>S</li>;
var list = <ul>{items1}{items2}</ul>;

还有另一种方法可以实现这一目标吗？

Answer 1

JSX 非常直接地对 Javascript 语法进行脱糖，因此您可以自由地混合使用它。

/** @jsx React.DOM */
var items1 = [ <li>S</li>,            var items1 = [ React.DOM.li({}, "S"),
               <li>S</li>,                           React.DOM.li({}, "S"),
               <li>S</li> ];                         React.DOM.li({}, "S") ];
var items2 = [ <li>S</li>,            var items2 = [ React.DOM.li({}, "S"),
               <li>S</li>,                           React.DOM.li({}, "S"),
               <li>S</li> ];                         React.DOM.li({}, "S") ];
var list = <ul>{items1+items2}</ul>;  var list = React.DOM.ul({}, items1+items2);