ReactJS无JSX

Question

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

然而，我找不到任何好的文章来解释如何使用没有JSX的React。因此，请指导并展示如何使用工厂、类、组件和其他方式使用ReactJS而无需使用JSX。这方面的文档不足。

- Temp O'rary

---

http://facebook.github.io/react/docs/displaying-data.html#react-without-jsx - Henrik Andersson

https://www.packtpub.com/books/content/using-reactjs-without-jsx - Errorpro

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

直接编写JavaScript代码即可！

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

- Mulan

---

我确实知道这些，但我需要更多细节，例如关于createClass、createFactory、Components等方面的信息。特别是在我的场景中，这些应该如何使用以及何时使用。 - Temp O'rary

你可以阅读文档，或者将任何有效的JSX粘贴到http://babeljs.io/repl中，你会在那里看到正确的输出。 - Mulan

说实话，你只是在给自己制造一场艰苦的战斗。JSX 是一个巨大的时间节省器，你应该学会如何使用它。Babel 让你的生活变得简单。 - Mulan

谢谢。我知道。但是我想尽可能地提高性能。其中一种方法是放弃JSX-to-JS转换。 - Temp O'rary

你不应该在浏览器中进行JSX转换。你应该将其作为应用程序的构建步骤来完成，然后将“编译”后的应用程序分发给客户端。请阅读此页面顶部的第一个警告。链接 - Mulan

同意。但我不想在流程中添加另一个步骤。最终，我的团队将习惯于JS代码，并且也不会出错的余地。我们可以创建一些东西来改善React代码在项目中的使用方式，并使团队更加舒适。我知道已经有一些项目可以做到这一点。 - Temp O'rary

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 一样易读。我会说更易读，因为没有关闭标签。

- Marcelo Cantos

Answer 3

你也可以尝试使用我们在Uqbar制作的库：

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

它非常容易使用，提供了比React开箱即用接口更干净的界面。

- Nicolás Scarcella

---

谢谢！很高兴能帮到你。请访问该项目的Github并分享任何想法/请求。 - Nicolás Scarcella

不错，API设计得很好，实现也很简洁。可惜看起来已经没有人维护了。 - 3dGrabber

Answer 4

官方文档

这里是一份官方文档，介绍如何在不使用JSX的情况下使用React。

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

我可以建议在lambda上使用React，这种方式可以更加函数化地编写React代码。

- sultan

Answer 5

这是我首选的方法：https://github.com/simonrelet/react-pure-html-component-loader 该组件旨在让您编写纯HTML模板，以便在React中使用作为组件，而不会以可怕的方式混合HTML和JavaScript。

我发现这个存储库已经一年没有更新了，所以如果我们想要在脚本中使用React而不混合JSX，这个人需要帮助。

- jacmkno

Answer 6

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

- Adam

Answer 7

HyperScript Helpers 是基于 JavaScript 的选项。

比 createElement 和通常的 JSX 更简洁，但仍然是纯 JavaScript，因此例如使用 JavaScript 注释、数组、对象和函数。

JSX：

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

与HyperScript助手相比：

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

示例 HTML to 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' })
]);

- RationalDev likes GoFundMonica