Reactjs 如何在React with Coffeescript中呈现HTML标记？

我目前正在学习ReactJS以及如何使用RubyonRails作为其后端，所以如果我做出了愚蠢的假设，我很抱歉，请随意责骂我

我遵循一个教程，作者使用Coffeescript而不是ES6来处理他的ReactJS代码

他提供了一个与此类似的示例组件（coffeescript）：

这有两个错误。第一个是关于

React.createClass

，我发现它已被弃用，不再工作。相反，我使用的是

createReactClass

。好。但是现在，

React.DOM.h1

给出了一个错误，表示

uncaughttypeerror:无法读取未定义的

的属性“h1”，这与我使用的其他HTML标记相同。我认为这是因为

createReactClass

没有提供以前由

React.createClass

提供的必要功能

无论如何，在研究与此间接相关的另一个错误时：

因此，切断

React.DOM

部分。这会产生另一种类型的错误，即：

uncaughtreferenceerror:div未定义

。同样，我假设这是由于对

React.createClass

的更改

有没有一种方法可以使用React with CoffeeScript，这样我就可以这样使用它：

@Rows = createReactClass
  render ->
    div
      className: 'rows'
      h1
        className: 'title'
        'Rows'

无需打开和关闭HTML标记，也无需

React.DOM

我不知道这是否可能，或者它是否有效，或者是否有很多方法可以达到类似的效果。我只是想知道，在我深入思考之前，是否有办法做到这一点

谢谢

更新 我已经取得了一些进展，尽管我仍然有一个错误。我尝试了以下方法：

import React from 'react'
import ReactDom from 'react-dom'
{div, h1, p} = ReactDom

class Rows extends React.Component
  render: ->
    h1
      className: 'col-md-12'
      'Rows'
  
export default Rows

---

这会产生以下错误：

uncaughttypeerror:h1不是函数

您可以使用带有React而不带JSX的coffeescript。我认为这使得代码更加简洁：

React = require('react')
ReactDOM = require('react-dom')
{div, h1} = ReactDom


class Rows extends React.Component

  render: ->
    div
      className: 'rows'
      h1
        className: 'title'
        'Rows'

module.exports = React.createFactory Rows

根据您使用的React版本，可能需要单独包含该软件包

reacadom

直接使用DOM元素

使用Coffeescript的类语法，而不是传统函数

导出组件的工厂，以便在其他组件中轻松使用：

---

以下是最终奏效的方法

React = require('react')
PropTypes = require('prop-types')
ReactDom = require('react-dom-factories')
createReactClass = require('create-react-class')
{div, h1} = ReactDom

Rows = createReactClass
  render: ->
    div
      className: 'col-md-12'
      h1
        className: 'title'
        'Rows'

export default Rows

所以我一直在使用React 16，令人难以置信的是，在过去的6个月中，有多少事情发生了变化。我是一个全新的反应者，所以我完全不知道这是如何工作的，但我成功地使用了上面的代码，没有错误

首先：

ReactDom = require('react-dom-factories')

这就是我错过的那个。我得到的错误是

div

和

h1

不是函数，或者没有定义。因此，

React.DOM

现在作为

React-DOM工厂

提供：

15.x中引入的弃用已从核心中删除 包裹React.createClass现在作为create React类提供， React.PropTypes作为prop类型，React.DOM作为React DOM工厂， react插件将测试utils作为react-dom/test-utils和浅层渲染器 作为反应测试渲染器/浅层

秒：

ReactDom = require('react-dom-factories')

如果其他任何人遇到此问题，并且您收到的错误表明

找不到模块“react dom factories”

，这意味着您必须使用以下命令将它们添加到您的webpacker中：

yarn add react-dom-factories

如果您遵循上面的示例，您可能还必须添加

创建反应类

和

道具类型

最后：

确保您的coffeescript文件的扩展名为simple.coffee。如果使用

.js.coffee

或

.jsx.coffee

将出现无法找到组件的错误

我不能100%确定这是否必要，但在搜索解决方案时，我还将

cjsx loader

添加到了我的webpacker中。这是一个用于Webpack的coffee react transform loader模块

---

更新：最后一部分不是必需的。我做了一个新项目，这一点都不是必需的。

官方文档提供了所需的信息，除非我遗漏了什么，它们只提到XML元素，这些元素必须包含一个开始和结束标记。我的问题是如何像在我的第三个代码片段中那样使用它们（没有结束标记，只有缩进，coffeescript样式）。要使用类似jsx的语法进行编写，请看这正是我想要做的！现在，请原谅我的noob问题，我发现

require

没有定义。我会错过什么？我可以运行JSX格式的“标准”组件（当然，使用不同的代码），因此我认为问题不在我的

应用程序.js

上。我更新了我的问题，并在您提供的帮助下取得了一些进展。我仍然有一个错误，但我想我越来越接近了。

ReactDom = require('react-dom-factories')

yarn add react-dom-factories