没有 JSX 的 ReactJS

Question

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

然而，我找不到任何好的 atricles 来解释没有 JSX 的 React。

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

没有足够的文档来说明这一点。

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

Answer 2

您还可以尝试我们在 Uqbar 制作的库：

https://www.npmjs.com/package/njsx

它非常易于使用，并且提供了比 React 开箱即用界面更清晰的界面。