没有JSX的ReactJS

Question

我正在使用React生成一个体积庞大且复杂的DOM树结构，但我选择不使用JSX（ 只是为了避免从JSX到JS的最终和不可避免的转换 ）。 根据某些（if-else）条件，用户可以生成或看到此DOM的某些部分。 在另一种情况下，可能需要循环来生成一些HTML元素，依此类推。

但是，在没有JSX的情况下解释React，我找不到任何好的atricles。

因此， 请指导并展示如何在没有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 })
    );
  })
);

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

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

• https://jsfiddle.net/b4aj6gL9/
• https://jsfiddle.net/fd38ya0r/
• https://jsfiddle.net/f4uqqrjv/
• https://jsfiddle.net/905tL9k6/

虽然这段代码确实使用了一个不熟悉的习语，但__. 前缀提供了一个强大的视觉助记符，就像JSX一样可读。 由于没有密切标签，我会说更具可读性。

Answer 3

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 4

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

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

我看到存储库已经有一年没有更新了，所以如果我们想要能够使用反应而没有那些可怕的JSX混合在脚本中，那么这个人需要帮助。

Answer 5

📖 官方文件

这是一个如何在没有JSX的情况下使用React的官方文档。

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

我可以建议在lambda上使用React，它使编码以更多功能的方式进行反应。

Answer 6

HyperScript Helpers是基于JavaScript的选项。

比createElement和JSX更简洁，但仍然是纯JavaScript，所以例如使用JavaScript注释，数组，对象和函数，

JSX：

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

与HyperScript助手：

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

示例HTML到HyperScript转换器 。

React HyperScript Helpers库的 用法 ：

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 7

您也可以尝试我们在Uqbar制作的图书馆：

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

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