你如何使用 Coffeescript 在 React 中渲染 HTML 标签？

Question

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

我正在学习一个教程，其中作者使用 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 提供的必要功能。

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

@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

您可以在没有 JSX 的情况下将 coffeescript 与 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 的 class 语法代替遗留函数。
导出组件的工厂，以便您可以轻松地在另一个组件中使用它：

 Rows = require('./rows')

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

Answer 2

这是最终起作用的方法

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:

The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow.

第二:

如果其他人遇到这个问题并且你得到错误 Cannot find module "react-dom-factories"，这意味着你必须将它们添加到你的 webpacker 中：

yarn add react-dom-factories

如果您按照我上面的示例进行操作，您可能还必须添加 create-react-class 和 prop-types。

最后：

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

~~我不是 100% 确定这是否有必要，但我在寻找解决方案时也将 cjsx-loader 添加到我的 webpacker 中。这是一个用于 Webpack 的 coffee-react-transform 加载器模块。~~

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

你如何使用 Coffeescript 在 React 中渲染 HTML 标签？

How do you render HTML tags in React with Coffeescript?

coffeescript

reactjs

ruby-on-rails-5

更新