javascript - 没有 JSX 的 ReactJS

Question

我正在使用 React 生成一个相当庞大且复杂的 DOM 树结构但我选择不使用 JSX(只是为了避免最终和不可避免的再次从 JSX 转换为 JS)。此 DOM 的某些部分将根据某些(if-else)条件生成或对用户可见。在另一种情况下，可能需要一个循环来生成一些 HTML 元素等等。

但是，我找不到任何好的文章来解释没有 JSX 的 React。

因此，请指导并展示如何在没有 JSX 的情况下使用 ReactJS 以及如何使用 Factory、类、组件等。

这方面的文档不足。

Answer 1

您似乎知道 JSX 会转换为 JS。

所以不用写 JSX ...

// jsx
var data = [1,2,3];

var nodes = <ul>{data.map(function(p,i) {
  return <li><Person key={i} id={p} /></li>; 
})}</ul>;

只需编写 JS 即可!

// js
var data = [1, 2, 3];

var nodes = React.createElement(
  "ul",
  null,
  data.map(function (p, i) {
    return React.createElement(
      "li",
      null,
      React.createElement(Person, { key: i, id: p })
    );
  })
);