更新

Question

我目前正在学习ReactJS以及如何使用Ruby on Rails作为其后端，所以如果我做出愚蠢的假设，我会道歉，随时骂我。

我按照教程使用Coffeescript而不是ES6来处理他的ReactJS代码。

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

@Rows = React.createClass
  render ->
    React.DOM.div
      className: 'rows'
      React.DOM.h1
        className: 'title'
        'Rows'

这有两个错误。第一个属于React.createClass，我发现它已被弃用，不再有效。相反，我使用createReactClass。好。但是现在，React.DOM.h1给出了Uncaught TypeError: Cannot read property 'h1' of undefined错误，对于我使用的其他HTML标记也是如此。我认为这是由于createReactClass未提供React.createClass之前提供的必要功能。

无论如何，在研究与此间接相关的另一个错误时，I found someone suggesting to use something like this：

@Rows = React.createClass
  render ->
    div
      className: 'rows'
      h1
        className: 'title'
        'Rows'

所以，切断React.DOM部分。这会产生另一种类型的错误：Uncaught ReferenceError: div is not defined。同样，我因为React.createClass的更改而假设它。

有没有办法将React与CoffeeScript一起使用，这样我就可以像这样使用它：

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

无需打开和关闭HTML标记，也没有React.DOM？

我根本不知道它是否可能，或者它是否有效，或者即使有很多方法可以实现具有类似结果的东西。在我深入了解React之前，我只是想知道是否有这样的方法可以做到这一点。

谢谢！

更新

我已经取得了一些进展，但我仍然遇到了错误。我尝试了以下方法：

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

这会出现以下错误：Uncaught TypeError: h1 is not a function。

Answer 1

这里有什么最终起作用

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个月里，有多少事情发生了变化。我完全是React的新手，所以我完全不知道它是如何工作的，但我设法使用上面的代码而没有错误。

<强>第一：

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

这是我失踪的那个。我收到的错误是div和h1没有功能，或者没有定义。因此，per the documentation React.DOM现在可用作react-dom-factories：

15.x中引入的弃用已从核心中删除包。 React.createClass现在可用作create-react-class， React.PropTypes作为prop-types，React.DOM作为react-dom-factories， react-addons-test-utils作为react-dom / test-utils和浅渲染器 as react-test-renderer / shallow。

<强>第二：

如果其他人遇到此问题并且您收到错误Cannot find module "react-dom-factories"，则表示您必须将其添加到您的网络包装器中：

yarn add react-dom-factories

如果您按照上面的示例操作，则可能还需要添加create-react-class和prop-types。

<强>最后：

确保coffeescript文件的扩展名只是.coffee。如果您使用.js.coffee或.jsx.coffee，您将收到无法找到该组件的错误。

~~我不是100％确定是否有必要，但我在搜索解决方案时也向我的webpacker添加了cjsx-loader。它是Webpack的咖啡反应转换加载器模块。~~

更新：最后一部分是不必要的。我做了一个新项目，根本不需要。

Answer 2

你可以在没有JSX的情况下使用Cactfeescript和React。我认为它可以使代码更清晰：

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版本，您可能需要单独添加React-DOM包
Destructure ReacDom直接使用DOM元素
使用Coffeescript的类语法而不是遗留函数。
导出组件的工厂，以便在其他组件中轻松使用它：

的

 Rows = require('./rows')

 class OtherComponent extends React.Component
   .
   .
   .
   render: ->
     div
       className: 'container'
       Rows()

如何使用Coffeescript在React中呈现HTML标签？

更新

2 个答案: