没有 JSX 的 ReactJS

Question

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

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

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

这方面的文档不足。

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

我使用以下技巧（模仿 React 主页上的第一个示例）：

const __ = Object.assign(React.createElement, React.DOM);

var HelloMessage = React.createClass({
  render: function() {
    return __.div({}, 'Hello ', this.props.name);
  }
});

ReactDOM.render(__(HelloMessage, {name:"John"}), document.getElementById('root'));

以下是所有四个主页示例：

虽然此代码确实使用了一个不熟悉的习惯用法，但 __. 前缀提供了强大的视觉助记符，与 JSX 一样可读。由于没有关闭标签，我会说更具可读性。

Answer 3

HyperScript Helpers 是一个基于 JavaScript 的选项。

比 createElement 和 JSX 更简洁，但仍然很简单 JavaScript，因此例如 JavaScript 使用注释、数组、对象和函数，

JSX:

<MyComponent className='className'>Hi</MyComponent>

与 HyperScript 助手对比：

MyComponent('.className', ['Hi'])

例子HTML to HyperScript converter.

用法来自 React HyperScript Helpers library:

DOM组件真的很好用。只需导入即可。

import { div, h2 } from 'react-hyperscript-helpers';

export default () => div('.foo', [ h2('Hello, world') ]);

对于自定义组件，您可以创建工厂函数或使用 h 函数，类似于 react-hyperscript。

//MyComponent
import { div, hh } from 'react-hyperscript-helpers';

export default hh(() => div('Nifty Component'));

//Container
import MyComponent        from './MyComponent';
import SomeOtherComponent from 'who-whats-its';
import { div, h }         from  'react-hyperscript-helpers';

export default () => div('.foo', [
  MyComponent(),
  h(SomeOtherComponent, { foo: 'bar' })
]);

Answer 4

NoJSX 是基于 JSON 的轻量级替代方案。您可以创建如下所示的树...

- div.container.container--app
    -- div.jumbotron
        --- h1
        --- p

... 通过定义用 children、props 和 type 等属性表示的元素的树结构。这些反映了 React.createElement.

的论点

const pageHeader = {
  children: [
    {
      children: 'Hello World.',
      type: 'h1'
    },
    {
      children: 'Foobar.',
      type: 'p'
    }
  ],
  props: { className: 'jumbotron' },
  type: 'div'
};

const templateData = {
  children: [
    {
      props: { title },
      type: Helmet
    },
    pageHeader
  ],
  props: { className: 'container container--app' },
  type: 'div'
};

const template = new NoJSX(templateData);
return template.compile();

Answer 5

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

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

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

Answer 6

这是我的首选方法：https://github.com/simonrelet/react-pure-html-component-loader

这个组件应该可以让你编写纯 html 模板作为反应中的组件使用，而不会以这种可怕的方式混合 HTML 和 javascript。

我看到存储库已经一年没有更新了，所以如果我们希望能够在脚本中不混入那种可怕的 JSX 的情况下使用 React，这个人需要帮助。

Answer 7

官方文档

Here is 官方文档如何在没有 JSX 的情况下使用 React。

除了提到的 JSX 替代库之外，

我可以建议 React on lambda 这使得编码以更实用的方式做出反应。

没有 JSX 的 ReactJS

ReactJS without JSX

javascript

reactjs

react-jsx